/**
* =====================================
* 滚动条美化
**/

/* 亮色 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--chatdlm-scrollbar-thumb);
  background-clip: padding-box;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--chatdlm-scrollbar-thumb-hover);
}

/* 暗色 */
body[theme-mode=dark] ::-webkit-scrollbar-thumb {
  background: var(--chatdlm-scrollbar-thumb);
}

body[theme-mode=dark] ::-webkit-scrollbar-thumb:hover {
  background: var(--chatdlm-scrollbar-thumb-hover); /* 更深的灰色 */
}


.wk-message-time-box {
    width: 85%;
    margin: 0 auto;
    padding: 1px 0 calc(var(--chatdlm-message-gap) - 2px) 0;
    text-align: center;
    display: table;
}

.wk-message-time {
    color: var(--chatdlm-text-tertiary);
    padding: 0 8px;
    white-space: nowrap;
    width: auto;
    font-size: var(--chatdlm-message-time-font-size);
    line-height: 1;
    font-weight: 400;
}


.wk-message-time-line1 {
    background-image: none;
    background-image: none;
    background-image: none;
    background-image: none;
    background-image: none;
    background-position: 0 0,0 100%;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    top: 13px;
    width: 50%;
    display: table-cell;
    position: relative;
}

.wk-message-time-line2 {
    background-image: none;
    background-image: none;
    background-image: none;
    background-image: none;
    background-image: none;
    background-position: 0 0,0 100%;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    top: 13px;
    width: 50%;
    display: table-cell;
    position: relative;
}


.wk-message-split-box {
    width: 85%;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    display: table;
}

.wk-message-split-content {
    color: var(--chatdlm-text-tertiary);
    padding: 5px 8px 0;
    white-space: nowrap;
    width: auto;
    font-size: 12px;
    font-weight: 600;
}

.wk-message-split-line1 {
    background-image: linear-gradient(360deg,transparent,var(--chatdlm-layer-line));
    background-position: 0 0,0 100%;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    top: 13px;
    width: 50%;
    display: table-cell;
    position: relative;
}

.wk-message-split-line2 {
    background-image: linear-gradient(360deg,var(--chatdlm-layer-line),transparent);
    background-position: 0 0,0 100%;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    top: 13px;
    width: 50%;
    display: table-cell;
    position: relative;
}
/* 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-badge {
  position: relative;
  display: inline-block;
}
.semi-badge-dot {
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  border-radius: var(--semi-border-radius-circle);
  background-color: var(--semi-color-bg-1);
  border: 1px var(--semi-color-bg-1) solid;
  z-index: 1;
}
.semi-badge-count {
  box-sizing: border-box;
  height: 18px;
  min-width: 18px;
  border-radius: 9px;
  padding: 0px 4px;
  background-color: var(--semi-color-bg-1);
  border: 1px var(--semi-color-bg-1) solid;
  z-index: 1;
  text-align: center;
  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: 14px;
  color: var(--semi-color-bg-2);
}
.semi-badge-rightTop {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  transform-origin: 100% 0%;
}
.semi-badge-rightBottom {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%);
  transform-origin: 100% 0%;
}
.semi-badge-leftTop {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  transform-origin: 100% 0%;
}
.semi-badge-leftBottom {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%);
  transform-origin: 100% 0%;
}
.semi-badge-custom {
  display: flex;
}
.semi-badge-block {
  position: static;
  display: inline-block;
}
.semi-badge-light::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--semi-color-bg-2);
  z-index: -1;
}
.semi-badge-light::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0;
  background-color: inherit;
  z-index: -1;
}
.semi-badge-primary.semi-badge-solid {
  background-color: var(--semi-color-primary);
}
.semi-badge-primary.semi-badge-light {
  background-color: var(--semi-color-primary-light-default);
  color: var(--semi-color-primary);
}
.semi-badge-primary.semi-badge-inverted {
  color: var(--semi-color-primary);
}
.semi-badge-secondary.semi-badge-solid {
  background-color: var(--semi-color-secondary);
}
.semi-badge-secondary.semi-badge-light {
  background-color: var(--semi-color-secondary-light-default);
  color: var(--semi-color-secondary);
}
.semi-badge-secondary.semi-badge-inverted {
  color: var(--semi-color-secondary);
}
.semi-badge-tertiary.semi-badge-solid {
  background-color: var(--semi-color-tertiary);
}
.semi-badge-tertiary.semi-badge-light {
  background-color: var(--semi-color-tertiary-light-default);
  color: var(--semi-color-tertiary);
}
.semi-badge-tertiary.semi-badge-inverted {
  color: var(--semi-color-tertiary);
}
.semi-badge-danger.semi-badge-solid {
  background-color: var(--semi-color-danger);
}
.semi-badge-danger.semi-badge-light {
  background-color: var(--semi-color-danger-light-default);
  color: var(--semi-color-danger);
}
.semi-badge-danger.semi-badge-inverted {
  color: var(--semi-color-danger);
}
.semi-badge-warning.semi-badge-solid {
  background-color: var(--semi-color-warning);
}
.semi-badge-warning.semi-badge-light {
  background-color: var(--semi-color-warning-light-default);
  color: var(--semi-color-warning);
}
.semi-badge-warning.semi-badge-inverted {
  color: var(--semi-color-warning);
}
.semi-badge-success.semi-badge-solid {
  background-color: var(--semi-color-success);
}
.semi-badge-success.semi-badge-light {
  background-color: var(--semi-color-success-light-default);
  color: var(--semi-color-success);
}
.semi-badge-success.semi-badge-inverted {
  color: var(--semi-color-success);
}

.semi-rtl .semi-badge,
.semi-portal-rtl .semi-badge {
  direction: rtl;
}
/* 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 */
.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 */
@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-popconfirm {
  box-sizing: border-box;
  max-width: 400px;
}
.semi-popconfirm-inner {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 24px 20px;
  position: relative;
}
.semi-popconfirm-header {
  display: flex;
  justify-content: flex-start;
}
.semi-popconfirm-header-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;
  margin-bottom: 8px;
  color: var(--semi-color-text-0);
}
.semi-popconfirm-header-icon {
  width: 24px;
  height: 24px;
  margin-right: 12px;
}
.semi-popconfirm-header .semi-icon-alert_triangle {
  color: var(--semi-color-warning);
}
.semi-popconfirm-header-body {
  display: inline-flex;
  flex-grow: 1;
  flex-direction: column;
}
.semi-popconfirm-body {
  color: var(--semi-color-text-2);
}
.semi-popconfirm-body-withIcon {
  margin-left: 36px;
}
.semi-popconfirm-body > p {
  margin: 0;
  padding: 0;
}
.semi-popconfirm-footer {
  margin-top: 25px;
  display: flex;
  justify-content: flex-end;
}
.semi-popconfirm-footer > .semi-button:first-child:not(:last-child) {
  margin-right: 8px;
}
.semi-popconfirm-popover {
  border-radius: var(--semi-border-radius-medium);
}

.semi-popover-with-arrow .semi-popconfirm-inner {
  padding: 12px 12px 12px 8px;
}

.semi-popconfirm-rtl {
  direction: rtl;
}
.semi-popconfirm-rtl .semi-popconfirm-inner {
  padding: 24px 20px 24px 24px;
}
.semi-popconfirm-rtl .semi-popconfirm-header {
  margin-right: 0;
}
.semi-popconfirm-rtl .semi-popconfirm-header-icon {
  margin-right: 0;
  margin-left: 12px;
}
.semi-popconfirm-rtl .semi-popconfirm-footer {
  justify-content: flex-end;
}
.semi-popconfirm-rtl .semi-popconfirm-footer > .semi-button:first-child:not(:last-child) {
  margin-right: 0;
  margin-left: 8px;
}

.semi-popover-with-arrow.semi-popconfirm-rtl {
  direction: rtl;
}
.semi-popover-with-arrow.semi-popconfirm-rtl .semi-popconfirm-inner {
  padding: 12px 8px 12px 12px;
}
/* shadow */
/* sizing */
/* spacing */
.semi-progress {
  display: flex;
  align-items: center;
}
.semi-progress-track {
  background-color: var(--semi-color-fill-0);
  border-radius: var(--semi-border-radius-small);
}
.semi-progress-horizontal {
  height: 4px;
  margin-top: 4px;
  margin-bottom: 4px;
}
.semi-progress-horizontal.semi-progress-large {
  height: 6px;
}
.semi-progress-horizontal .semi-progress-track {
  height: 100%;
  width: 100%;
}
.semi-progress-horizontal .semi-progress-track-inner {
  height: 100%;
  background-color: var(--semi-color-success);
  border-radius: var(--semi-border-radius-small);
  transition: width 0.3s;
  transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95);
}
.semi-progress-horizontal .semi-progress-line-text {
  min-width: 45px;
  font-weight: 600;
  margin-left: 16px;
  color: var(--semi-color-text-0);
}
.semi-progress-vertical {
  width: 4px;
  display: inline-flex;
  height: 100%;
  margin-left: 4px;
  margin-right: 4px;
  flex-direction: column;
}
.semi-progress-vertical.semi-progress-large {
  width: 6px;
}
.semi-progress-vertical .semi-progress-track {
  height: 100%;
  width: 100%;
}
.semi-progress-vertical .semi-progress-track-inner {
  background-color: var(--semi-color-success);
  border-radius: var(--semi-border-radius-small);
  width: 100%;
  transition: height 0.3s;
  transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95);
}
.semi-progress-vertical .semi-progress-line-text {
  font-weight: 600;
  margin-top: 8px;
}
.semi-progress-circle {
  position: relative;
  display: inline-block;
}
.semi-progress-circle-ring {
  display: block;
}
.semi-progress-circle-ring-inner {
  transition: stroke-dashoffset 0.3s;
  transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.semi-progress-circle-text {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  text-align: center;
  transform: translate(-50%, -50%);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--semi-color-mode-minor-text);
}

.semi-rtl .semi-progress,
.semi-portal-rtl .semi-progress {
  direction: rtl;
}
.semi-rtl .semi-progress-horizontal .semi-progress-line-text,
.semi-portal-rtl .semi-progress-horizontal .semi-progress-line-text {
  margin-left: 0;
  margin-right: 16px;
}
.semi-rtl .semi-progress-circle-ring-inner,
.semi-portal-rtl .semi-progress-circle-ring-inner {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.semi-rtl .semi-progress-circle-text,
.semi-portal-rtl .semi-progress-circle-text {
  left: auto;
  right: 50%;
  transform: translate(50%, -50%);
}
/* shadow */
/* sizing */
/* spacing */
.semi-space {
  display: inline-flex;
}
.semi-space-vertical {
  flex-direction: column;
}
.semi-space-horizontal {
  flex-direction: row;
}
.semi-space-align-center {
  align-items: center;
}
.semi-space-align-end {
  align-items: flex-end;
}
.semi-space-align-start {
  align-items: flex-start;
}
.semi-space-align-baseline {
  align-items: baseline;
}
.semi-space-wrap {
  flex-wrap: wrap;
}
.semi-space-tight-horizontal {
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.semi-space-tight-vertical {
  row-gap: 8px;
}
.semi-space-medium-horizontal {
  -moz-column-gap: 16px;
       column-gap: 16px;
}
.semi-space-medium-vertical {
  row-gap: 16px;
}
.semi-space-loose-horizontal {
  -moz-column-gap: 24px;
       column-gap: 24px;
}
.semi-space-loose-vertical {
  row-gap: 24px;
}

.semi-rtl .semi-space,
.semi-portal-rtl .semi-space {
  direction: rtl;
}
/* 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-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;
}
.chatdlm-theme-icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}

/* 全站鼠标提示(Hint)的样子：跟编辑器里的浮层(.cm-tooltip)、收藏里的弹出菜单同一套 —— 页面底、正文字、一条细线、浮层阴影。
   浅色模式就是浅色提示框，深色模式就是深色提示框，全部取色板变量，没有新色号；字号、内边距沿用 Semi 原来的 */
.semi-tooltip-wrapper.chatdlm-hint {
    background-color: var(--chatdlm-page-background);
    color: var(--chatdlm-text-primary);
    border: var(--wk-line);
    border-radius: var(--chatdlm-icon-button-radius);
    box-shadow: var(--semi-shadow-elevated);
}

/* 悬停铺红底、图标白(照 Windows 关闭钮，颜色用色板里的警示红和固定白)；静止和别的顶条按钮一样(WKLayout/index.css) */
.chatdlm-title-strip-button.chatdlm-close-button:hover {
    color: var(--chatdlm-fixed-white);
    background-color: var(--chatdlm-danger);
}

/* 贴在弹窗外框右上角：跟窗口顶条的按钮一样高 32 */
.chatdlm-title-strip-button.chatdlm-close-button-corner {
    position: absolute;
    top: 0;
    right: 0;
    height: 32px;
    z-index: 1;
}

/* 全站弹窗(见 index.tsx)：不要圆角；标题右边让出关闭按钮的位置 */
.chatdlm-modal .semi-modal-content {
    border-radius: 0;
}

/* 一圈细线(2026-11-12)：浮层的阴影撤掉以后(App.css)，没有遮罩的弹窗(个人信息、点头像出的名片……)跟后面的页面连成一片；
   好几个弹窗自己写了 border: none !important，这里用 html body 抬高一档统一补回同一条线(跟弹出菜单、提示框同一条 --wk-line) */
html body .chatdlm-modal .semi-modal-content {
    border: var(--wk-line) !important;
}

.chatdlm-modal .semi-modal-header {
    padding-right: 46px;
}

.wk-avatar {
    width: var(--chatdlm-list-avatar-size);
    height: var(--chatdlm-list-avatar-size);
    border-radius: var(--chatdlm-avatar-radius);
}


:root {
    --wk-height-viewqueueheader: 50px;
}

.wk-viewqueueheader {
    background-color: var(--wk-color-secondary);
    height: 50px;
    height: var(--wk-height-viewqueueheader);
    width: 100%;
    position: relative;
}

.wk-viewqueueheader-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wk-viewqueueheader-content-title {
    font-size: 17px;
    font-weight: 500;
    max-width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

body[theme-mode=dark] .wk-viewqueueheader-content-title {
    color: var(--chatdlm-text-primary);
}

.wk-viewqueueheader-back {
    position: absolute;
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0px 15px;
}

.wk-viewqueueheader-back img {
    width: 10px;
    height: 15px;
}

.wk-viewqueueheader-content-action {
    position: absolute;
    right: 15px;
}

.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: 15px;
    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 15px;

}

.wk-mergeforwardmessagelist-content-msg-info-first-name {
    font-size: 14px;
    color: var(--chatdlm-text-tertiary);
}

.wk-mergeforwardmessagelist-content-msg-info-first-time {
    font-size: 12px;
    color: var(--chatdlm-text-tertiary);
}

.wk-mergeforwardmessagelist-content-msg-info-second-msgcontent {
    padding: 0px 15px;
    margin-top: 5px;
}
:root {
    --wk-width-max-message: 540px;
}

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

.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: 0px;
}

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

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

.senderName {
    color: var(--chatdlm-text-tertiary);
    font-size: var(--chatdlm-message-name-font-size);
    line-height: var(--chatdlm-message-name-font-size);
    font-weight: 400;
    /* text-transform: capitalize; */
    margin-bottom: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.senderAvatar {
    width: var(--chatdlm-chat-avatar-size);
    height: var(--chatdlm-chat-avatar-size);
    cursor: pointer;
    flex-shrink: 0;
}

.senderAvatar img {
    width: var(--chatdlm-chat-avatar-size);
    height: var(--chatdlm-chat-avatar-size);
    border-radius: var(--chatdlm-avatar-radius);
}

/* 照微信：头像和气泡顶对齐，自己的消息左右镜像 */
.wk-message-base-box {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding: 0 var(--chatdlm-chat-side-margin);
}

.wk-message-base-send .wk-message-base-box {
    flex-direction: row-reverse;
}

.wk-message-base-box .senderAvatar { order: 0; }
.wk-message-base-box .wk-message-base-bubble-box { order: 1; }
.wk-message-base-box .messageFail { order: 2; align-self: center; }

.wk-message-base-bubble-box {
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
}

.wk-message-base-bubble-box.recv {
    margin-left: var(--chatdlm-avatar-bubble-gap);
    align-items: flex-start;
}

.wk-message-base-bubble-box.send {
    margin-right: var(--chatdlm-avatar-bubble-gap);
    align-items: flex-end;
}

.wk-message-base-bubble {
    color: var(--chatdlm-text-primary);
    display: flex;
    /* margin-bottom: 4px; */
    padding: var(--chatdlm-bubble-padding);
    position: relative;
    word-wrap: break-word;
    max-width: 540px;
    max-width: var(--wk-width-max-message);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: none;
    font-size: var(--chatdlm-message-font-size);
    align-items: flex-start;
}

.wk-message-base-bubble-box.hide .wk-message-base-bubble {
    padding: 0px;
}

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

@media screen and (max-width: 640px)  {
    .wk-message-base-bubble {
        max-width: calc(100vw - 80px);
    }
}

.wk-message-base-bubble-box.send .wk-message-base-bubble {
    background-color: var(--wk-color-theme) ;
    border-radius: var(--chatdlm-bubble-radius);
    color: var(--chatdlm-on-brand);
}

.wk-message-base-bubble-box.recv .wk-message-base-bubble {
    border-radius: var(--chatdlm-bubble-radius);
    background-color: var(--chatdlm-bubble-received);
    color: var(--chatdlm-text-primary);
}



.wk-message-base-bubble-box.send.middle .wk-message-base-bubble {
    border-radius: var(--chatdlm-bubble-radius);
}

.wk-message-base-bubble-box.send.first .wk-message-base-bubble {
    border-radius: var(--chatdlm-bubble-radius);
}

.wk-message-base-bubble-box.recv.middle .wk-message-base-bubble {
    border-radius: var(--chatdlm-bubble-radius);
}

.wk-message-base-bubble-box.recv.first .wk-message-base-bubble {
    border-radius: var(--chatdlm-bubble-radius);
}

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


.svgAppendix {
    display: none;
    overflow: hidden;
    position: absolute;
    width: 0.5625rem;
    height: 1.125rem;
    font-size: 1rem !important;
    bottom: -1px;
}


.wk-message-base-bubble-box.last .svgAppendix {
    display: none;
}

.wk-message-base-bubble-box.single .svgAppendix {
    display: none;
}


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

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

.wk-message-base-bubble-box.send .svgAppendix .corner {
    fill: var(--wk-color-theme);
}

.wk-message-base-bubble-box.recv .svgAppendix .corner {
    fill: var(--chatdlm-bubble-received);
}

/* .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: 1px;
}

.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(-10px, 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(25px, 0, 0);
   
}

.wk-message-base-checkBox .wk-check {
    position: absolute;
    bottom: 10px;
}

.wk-message-base-send .checkBox {
    left: auto;
    right: -30px;
}


.wk-message-base-send .wk-message-base-box.checked {
    margin-left: 0;
    margin-right: 30px;
}

.wk-message-base-recv .wk-message-base-box.checked .senderAvatar {
    left: -30px;
}

.replyBox {
    width: 100%;
}

.reply {
    position: relative;
    color: var(--chatdlm-text-secondary);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 12px;
    margin-bottom: 4px;
    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: 2px;
    height: 100%;
    border-radius: 50px;
    background-color: var(--wk-color-theme);
}

.messageMeta {
    position: relative;
    top: 0.375rem;
    bottom: auto !important;
    float: right;
    line-height: 1;
    height: 19px;
    margin-left: 0.4375rem;
    margin-right: -0.2rem;
}

.wk-message-base-bubble-box.send .messageMeta {
    top: 0rem;
}

.messageTime {
    margin-inline-end: 0.1875rem;
    font-size: .75rem;
    white-space: nowrap;
}

.wk-message-base-bubble-box.recv .messageTime {
    color: var(--chatdlm-text-tertiary);
}

.wk-message-base-bubble-box.send .messageTime {
    color: var(--chatdlm-on-brand);
    opacity: .75;
}

.textTitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: calc(1rem - .125rem);
    font-size: calc(var(--message-text-size, 1rem) - .125rem);
    font-weight: 500;
    color: var(--accent-color);
    unicode-bidi: plaintext;
    display: flex;
}

.icon-message-read::before {
    content: "";
    position: absolute;
    bottom: -4px;
    color: var(--chatdlm-on-brand);
    opacity: .7;
}

.icon-message-succeeded::before {
    content: "";
    position: absolute;
    bottom: -4px;
    color: var(--chatdlm-on-brand);
    opacity: .7;
}

.icon-message-pending::before {
    content: "";
    position: absolute;
    bottom: -4px;
}

.messageStatus {
    width: 1.19rem;
    height: 1.19rem;
    overflow: hidden;
    display: inline-block;
    line-height: 1;
    margin-left: -0.1875rem;
    font-size: 1.1875rem;
    border-radius: 0.625rem;
}

.messageFail {
    cursor: pointer;
}

.messageFail img {
    width: 20px;
    height: 20px;
    margin-left: 10px;
}

.wk-message-error-reason {
    font-size: 13px;
    margin-right: 10px;
    margin-top: 5px;
    color: var(--wk-color-font-tip);
}

/* 照微信：气泡侧面朝向头像的小三角，距气泡顶固定距离 */
.wk-message-base-bubble::before {
    content: "";
    position: absolute;
    top: var(--chatdlm-bubble-arrow-top);
    border-top: calc(var(--chatdlm-bubble-arrow-height) / 2) solid transparent;
    border-bottom: calc(var(--chatdlm-bubble-arrow-height) / 2) solid transparent;
}

.wk-message-base-bubble-box.recv .wk-message-base-bubble::before {
    /* 多伸进气泡 1px，避免小数像素下三角和气泡之间露缝 */
    left: calc(0px - var(--chatdlm-bubble-arrow-width));
    border-right: calc(var(--chatdlm-bubble-arrow-width) + 1px) solid var(--chatdlm-bubble-received);
}

.wk-message-base-bubble-box.send .wk-message-base-bubble::before {
    right: calc(0px - var(--chatdlm-bubble-arrow-width));
    border-left: calc(var(--chatdlm-bubble-arrow-width) + 1px) solid var(--chatdlm-brand);
}

.wk-message-base-bubble-box.hide .wk-message-base-bubble::before {
    display: none;
}

/* 图片：不套气泡，圆角跟气泡一致 */
.chatdlm-message-image {
    border-radius: var(--chatdlm-bubble-radius);
    overflow: hidden;
}

.wk-check {
    cursor: pointer;
}

/* 圆圈 20px：没勾是次一档字色的细线圈，勾了是主色实心 + 主色上的字色画勾(颜色都取色板) */
.wk-check-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--chatdlm-text-tertiary);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wk-check-circle-checked {
    border-color: var(--chatdlm-brand);
    background-color: var(--chatdlm-brand);
    color: var(--chatdlm-on-brand);
}

/* 勾了的圆不要边(颜色本来就跟底色一样)：圆圈 20 里面整整 20 都给勾的格子，勾就对着圆心。
   原来留着 1.5 的边，勾的格子要往外挪 1.5，可 1.5 的边在不同缩放下会被取整成 1 或 2，勾就跟着偏半个像素 */
.wk-check-circle-checked {
    border: none;
}

.wk-check-mark {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}



/* 卡片底色跟对方的气泡一样(2026-11-10 用户定：原来跟聊天背景同色，看不出卡片) */
.wk-mergeforwards {
    width: 300px;
    background-color: var(--chatdlm-bubble-received);
    border-radius: 8px;
    cursor: pointer;
}



.wk-mergeforwards-content {
    padding: 10px 10px 0px 10px;
    color: var(--chatdlm-text-primary);

}

.wk-mergeforwards-content-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--wk-message-color);
}

.wk-mergeforwards-content-items {
    padding-bottom: 5px;
}

.wk-mergeforwards-content-items .wk-mergeforwards-content-item {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    color: var(--chatdlm-text-tertiary) !important;
}

.wk-mergeforwards-content-tip {
    display: flex;
    justify-content: space-between;
    color: var(--chatdlm-text-tertiary) !important;
    font-size: 13px;
    padding: 2px 0px;
}

.wk-mergeforwards-content-tip p {
    margin-bottom: 0px;
}

.wk-mergeforwards-content-tip p:last-child {
    margin-top: -4px;
}

.wk-mergeforwards-content-line {
    width: 100%;
    background-color: var(--wk-line-color);
    height: 1px;
}
/* 「正在输入」三个点：占一行字的高度。中档原来就是 18px(不动)；大档气泡字 28px，一行是 28 × 1.3125，点在这一行里上下居中 */
.wk-message-typing {
    height: 18px;
}

body[font-size=large] .wk-message-typing {
    height: calc(var(--chatdlm-message-font-size) * 1.3125);
    display: flex;
    align-items: center;
}

/* 助理的过程卡片：在气泡里，字号、颜色照会话列表的名字(14 正文/次级)和摘要(12 更弱一档)，图标 16 跟字走 */
.chatdlm-process {
    font-size: 14px;
    line-height: 20px;
    min-width: 240px;
}

/* 标题行：可点(展开/收起)；进行中图标是主色、转圈 */
.chatdlm-process-head {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--chatdlm-text-secondary);
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.chatdlm-process-head:hover {
    color: var(--chatdlm-text-primary);
}

.chatdlm-process-head-icon {
    display: flex;
}

.chatdlm-process-head-running .chatdlm-process-head-icon {
    color: var(--chatdlm-brand);
}

.chatdlm-process-head-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chatdlm-process-timer {
    margin-left: auto;
    padding-left: 12px;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

/* 收起时第二行：正在做的这一步 + 它自己的秒表 */
.chatdlm-process-current {
    display: flex;
    margin: 2px 0 0 22px;
    font-size: 12px;
    line-height: 18px;
    color: var(--chatdlm-text-tertiary);
}

.chatdlm-process-current-timer {
    margin-left: auto;
    padding-left: 12px;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

/* 时间线：左边一条竖线，图标压在线上 */
.chatdlm-process-timeline {
    margin: 6px 0 0 7px;
    padding-left: 12px;
    border-left: var(--wk-line);
}

.chatdlm-process-step {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
}

.chatdlm-process-step-icon {
    display: flex;
    margin: 2px 0 0 -21px;
    color: var(--chatdlm-text-secondary);
    background-color: var(--chatdlm-bubble-received);
}

.chatdlm-process-step-running .chatdlm-process-step-icon {
    color: var(--chatdlm-brand);
}

.chatdlm-process-step-failed .chatdlm-process-step-title {
    color: var(--chatdlm-danger);
}

.chatdlm-process-step-main {
    flex: 1 1;
    min-width: 0;
}

/* 快速研究(2026-11-09，效果图用户确认过)：方案的几行字跟浏览过的网页同一个字号；等你确认那一步图标主色(不转)、底下两颗按钮(设置页那两种)。
   气泡本身是静底灰，灰按钮放上去看不见：改叠一层半透明灰(跟 Markdown 行内代码同一个变量)，悬停照设置页那一档 */
.chatdlm-process-step-detail {
    margin-top: 2px;
    font-size: 12px;
    line-height: 20px;
    color: var(--chatdlm-text-secondary);
}

.chatdlm-process-step-waiting .chatdlm-process-step-icon {
    color: var(--chatdlm-brand);
}

.chatdlm-process-step-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.chatdlm-process-step-actions .chatdlm-settings-button:not(.chatdlm-settings-button-primary) {
    background-color: var(--chatdlm-overlay-hover);
}

.chatdlm-process-step-actions .chatdlm-settings-button:not(.chatdlm-settings-button-primary):hover {
    background-color: var(--chatdlm-layer-hover);
}

.chatdlm-process-step-links {
    margin-top: 2px;
    font-size: 12px;
    line-height: 20px;
}

.chatdlm-process-step-link {
    color: var(--chatdlm-text-secondary);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chatdlm-process-step-link:hover {
    color: var(--chatdlm-text-primary);
}

.chatdlm-process-step-more {
    color: var(--chatdlm-text-tertiary);
    cursor: pointer;
}

.chatdlm-process-step-clock,
.chatdlm-process-step-duration {
    font-size: 12px;
    color: var(--chatdlm-text-tertiary);
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.chatdlm-process-step-duration {
    min-width: 48px;
    text-align: right;
}

.chatdlm-process-step-duration-live {
    color: var(--chatdlm-brand);
}

/* 做完的卡片在回答上面：跟回答之间一条分隔线 */
.chatdlm-process-done {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: var(--wk-line);
}

.chatdlm-process-spin {
    animation: chatdlm-process-spin 1s linear infinite;
}

@keyframes chatdlm-process-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 悬浮滚动条容器：和里面的滚动元素同大小 */
.chatdlm-scroll-area {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 原生滚动条宽度隐成 0，内容铺到最右边 */
.chatdlm-scroll-native-hidden::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* 拖条照微信实测：宽 7px、贴右 2px、圆头；滚动和悬停时显示，停 1 秒淡出 */
.chatdlm-scroll-thumb {
    position: absolute;
    right: var(--chatdlm-scrollbar-margin);
    width: var(--chatdlm-scrollbar-width);
    border-radius: calc(var(--chatdlm-scrollbar-width) / 2);
    background-color: var(--chatdlm-scrollbar-thumb);
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
    z-index: 2;
}

.chatdlm-scroll-thumb-visible {
    opacity: 1;
    pointer-events: auto;
}

.chatdlm-scroll-thumb:hover,
.chatdlm-scroll-thumb:active {
    background-color: var(--chatdlm-scrollbar-thumb-hover);
}


:root {
    --wk-conversation-footer: 120px;
    --wk-height-conversation-replyview: 50px;
}

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


.wk-conversation-hasreply {

}


.wk-conversation-content {
    width: 100%;
    height: calc(100% - 120px);
    height: calc(100% - var(--wk-conversation-footer));
    position: relative;
    transition: height 150ms ease-out,opacity 150ms ease-out;
}

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

.wk-conversation-hasreply .wk-conversation-content {
    height: calc(100% - 120px - 50px);
    height: calc(100% - var(--wk-conversation-footer) - var(--wk-height-conversation-replyview));
}


.wk-conversation-messages {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.wk-message-item {
    width: 100%;
    display: flex;
    position: relative;
    
}


.wk-message-item-last {
    margin-bottom: 15px;
}

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

.wk-conversation-footer {
    width: 100%;
    height: 120px;
    height: var(--wk-conversation-footer);
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    bottom: 0px;
}



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

.wk-conversation-chattoolbars {
    height: 100%;
    margin-bottom: 0px;
    display: flex;
    align-items: center;
   
}

.wk-conversation-chattoolbars-item {
    cursor: pointer;
}



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

}

.wk-conversation-content-fileupload-mask-content {
    width: 100%;
    height: 100%;
    border: 1px dashed var(--chatdlm-text-tertiary);
    border-radius: 4px;
    background-color: var(--chatdlm-floating-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    padding: 20px;

}

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

.wk-replyview-content {
    width: calc(100% - 80px);
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-left: 15px;
    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: 2px;
}

.wk-replyview-content-second {
    margin-top: 2px;
}

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

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

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

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: 50px;
    height: var(--wk-height-conversation-replyview);
    border-left: none;
}

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

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



.wk-conversation-multiplepanel {
    height: 120px;
    height: var(--wk-conversation-footer);
    background-color: var(--wk-color-secondary);
    width: 100%;
    z-index: 999;
    position: absolute;
    bottom: 0px;
    transform: translate3d(0, 120px, 0);
    transform: translate3d(0, var(--wk-conversation-footer), 0);
    transition: transform var(--wk-layer-transition);
}

.wk-conversation-multiplepanel-show {
    transform: translate3d(0, 0, 0);

}

.wk-conversationpositionview {
    position: absolute;
    bottom: 1.0rem;
    right: 1.5rem;
}

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

.wk-conversationpositionview-item {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--chatdlm-page-background);
   
    box-shadow: none;
    border: var(--wk-line);
    color: var(--chatdlm-text-secondary);
    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;
}

.wk-conversationpositionview-item img {
    width: 20px;
    height: 20px;
}

/* 有人@我：一个「@」字，不用图标(2026-11-12 用户定)；字号跟图标一样大，颜色跟按钮里的图标一样 */
.wk-conversationpositionview-at {
    font-size: 20px;
    line-height: 20px;
}

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


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

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

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

.wk-conversationpositionview-item .wk-conversation-unread-count {
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.45rem;
    border-radius: 0.75rem;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 500;
    text-align: center;
    position: absolute;
    top: -0.3rem;
    right: -0.3rem;
    background: var(--chatdlm-danger);
    color: var(--chatdlm-fixed-white);
    pointer-events: none;
}

.wk-conversationpositionview ul li {
    margin-top: 20px;
}

.wk-message-item-reminder {
    animation:wk-message-item-reminder-move 2s;
	-webkit-animation:wk-message-item-reminder-move 2s;
}

@keyframes wk-message-item-reminder-move
	{
	to {background-color:var(--wk-color-theme);}
}

/*Safari 和 Chrome:*/

/* 输入区上沿的拖动条：看不见，鼠标移上去变成上下箭头 */
.chatdlm-input-resizer {
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 6px;
    cursor: ns-resize;
    z-index: 2;
}



.mentions {
    margin: 1em 0;
  }
  
  .mentions--singleLine .mentions__control {
    display: inline-block;
    width: 130px;
  }
  .mentions--singleLine .mentions__highlighter {
    padding: 1px;
    border: 2px inset transparent;
  }
  .mentions--singleLine .mentions__input {
    padding: 1px;
    border: 2px inset;
  }
  
  .mentions--multiLine .mentions__control {
    font-family: monospace;
    font-size: 14pt;
  }
  .mentions--multiLine .mentions__highlighter {
    border: 1px solid transparent;
    padding: 9px;
    min-height: 63px;
  }
  .mentions--multiLine .mentions__input {
    border: 1px solid silver;
    padding: 9px;
    outline: 0;
  }
  
  .mentions__suggestions__list {
    background-color: var(--chatdlm-page-background);
    border: var(--wk-line);
    font-size: 10pt;
    /* box-shadow: 15px 0px 15px -15px #eee, -15px 0px 15px -15px #eee; */
  }
  
  .mentions__suggestions__item {
    padding: 5px 15px;
    border-bottom: var(--wk-line);
  }
  
  .mentions__suggestions__item--focused {
    background-color: var(--chatdlm-layer-hover);
  }
  
  .mentions__mention {
    position: relative;
    z-index: 1;
    color: var(--wk-color-theme);
    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-messageinput-box {
    background: var(--chatdlm-page-background);
    width: auto;
    height: calc(100% - 12px);
    margin: 0 12px 12px 12px;
    position: relative;
    box-sizing: border-box;

    /* 照微信：整个输入区是一个圆角框，输入在上，图标和发送在下 */
    display: flex;
    flex-direction: column;
    border: var(--wk-line);
    border-radius: 8px;
}

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 {
    flex: 1 1;
    min-height: 0;
    width: 100%;
    padding: 4px 4px 0px 4px;
    box-sizing: border-box;
}

.wk-messageinput-input {
    height: 100%;
    width: 100%;
    border: none;
    color: var(--chatdlm-text-primary);
    font-size: var(--chatdlm-message-font-size); /* 跟气泡字同一个字号，随「字体大小」变 */
    overflow-y: scroll;
    display: inline-block;
    -webkit-user-modify: read-write-plaintext-only;
    outline: none;
}



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

.wk-messageinput-input:empty:before {
        content: attr(data-placeholder);
        position: absolute;
        color: var(--chatdlm-text-tertiary);
}

.wk-messageinput-bar {
    height: 44px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    top: 0px;
}

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

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

.wk-messageinput-actionbox {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.wk-messageinput-actionitem {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wk-messageinput-sendbtn {
    height: 30px;
    padding: 0 16px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 14px;
    background-color: var(--chatdlm-layer-static);
    color: var(--chatdlm-text-tertiary);
    border-radius: 4px;
    cursor: default;
}

/* 发送按钮左边那一排(助理权限、语音条)：跟发送按钮同高，间距 8 */
.wk-messageinput-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* 助理权限按钮：静止照发送按钮没内容时(灰底、次级字)；移上去、菜单开着时字变正文色、底深一档 */
.chatdlm-permission-button {
    height: 30px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    background-color: var(--chatdlm-layer-static);
    color: var(--chatdlm-text-secondary);
    border-radius: 4px;
    cursor: pointer;
}

.chatdlm-permission-button:hover,
.chatdlm-permission-button-open {
    color: var(--chatdlm-text-primary);
    background-color: var(--chatdlm-layer-hover);
}

/* 语音条(照微信)：灰底条里一排主色竖线上下起伏，右边「正在听…」 */
.chatdlm-voice-input-wave {
    height: 30px;
    width: 200px;
    padding: 0 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 3px;
    border-radius: 4px;
    background-color: var(--chatdlm-layer-static);
}

.chatdlm-voice-input-wave i {
    display: block;
    width: 3px;
    border-radius: 2px;
    background-color: var(--chatdlm-brand);
    animation: chatdlm-voice-input-wave 1s ease-in-out infinite;
}

.chatdlm-voice-input-wave span {
    margin-left: auto;
    font-size: 12px;
    color: var(--chatdlm-text-tertiary);
}

@keyframes chatdlm-voice-input-wave {
    0%, 100% { transform: scaleY(0.4); }
    50% { transform: scaleY(1); }
}

.wk-messageinput-hasValue {
    background-color: var(--chatdlm-brand);
    color: var(--chatdlm-on-brand);
    cursor: pointer;
}


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

.wk-messageinput-iconbox {
    margin-right: 8px;
}

.wk-messageinput-icon {
    width: 20px;
    height: 20px;
    border-radius: 3px;
}

.wk-messageinput-selected {
    color: var(--chatdlm-text-primary);
    /* background-color: #1264a3; */
}

.quickReplyPanel {
    position: absolute;
    border: var(--wk-line);
    max-height: 400px;
    overflow-x: hidden;
    bottom: 0;
    background-color: var(--chatdlm-page-background);
    width: 100%;
    border-radius: 4px;
}

    .quickReplyPanel ul {
        margin: 0;
        padding: 0;
    }

        .quickReplyPanel ul li {
            list-style-type: none;
            height: 60px;
            border-bottom: var(--wk-line);
            cursor: pointer;
        }

.quickReplyItem {
}

    .quickReplyItem :hover {
        background-color: var(--chatdlm-layer-hover);
    }


.quickReplySelect {
    background-color: var(--chatdlm-layer-selected) !important;
    color: var(--chatdlm-text-primary) !important;
}

.wk-messageinput-header {
}

.wk-messageinput-reply {
    margin: 10px 10px 0px 10px;
    background-color: var(--chatdlm-layer-static);
    display: flex;
    color: var(--chatdlm-text-secondary);
    align-items: center;
}

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

.wk-messageinput-replycontent {
    overflow: hidden;
    text-overflow: ellipsis;
    height: 22px;
}

.wk-messageinput-input__control {
    background-color: var(--chatdlm-page-background);
}

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

.wk-messageinput-input__suggestions {
    background-color: var(--wk-color-item);
}

body[theme-mode=dark] .wk-messageinput-input__input {
    color: var(--chatdlm-text-primary);
}
/* @成员列表里「所有人」那一行：不用图，一个「@」字占头像那么大的位置(2026-11-12 用户定) */
.wk-messageinput-at {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--chatdlm-text-secondary);
}

/* 右键菜单(消息、输入框、会话等)：2026-11-12 用户定照微信 —— 不要阴影，页面底 + 一条细线 + 圆角 6(跟鼠标提示、弹出菜单同一个样子)；
   一行一项跟加号菜单(.wk-chatmenuspopover，见 Pages/Chat/index.css)同一套；颜色全取色板 */
.wk-contextmenus {
    position: fixed;
    top: 100px;
    left: 0px;
    z-index: 99;
    min-width: 120px;
    padding: 4px 0;
    background-color: var(--chatdlm-page-background);
    color: var(--chatdlm-text-primary);
    border: var(--wk-line);
    border-radius: var(--chatdlm-icon-button-radius);
    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;
}

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

.wk-contextmenus ul {
    margin-top: 0;
    margin-bottom: 0;
}

.wk-contextmenus .wk-chatmenuspopover li {
    padding: 8px 24px 8px 12px;
    white-space: nowrap;
}

/* 图标那一列：没图标的项也占着，字对齐 */
.wk-contextmenus .wk-chatmenuspopover-avatar {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--chatdlm-text-secondary);
}

.wk-contextmenus .wk-chatmenuspopover-title:first-child {
    margin-left: 0;
}

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

/* 分隔线(照微信，几组之间)：线色取色板的线。加号菜单(MenusPopover)的分组线也是这一条 */
.wk-contextmenus li.wk-contextmenus-divider,
.wk-chatmenuspopover li.wk-contextmenus-divider {
    height: 1px;
    padding: 0;
    margin: 4px 10px;
    background-color: var(--chatdlm-layer-line);
    cursor: default;
}

.wk-contextmenus li.wk-contextmenus-divider:hover,
.wk-chatmenuspopover li.wk-contextmenus-divider:hover {
    background-color: var(--chatdlm-layer-line);
}

/* 删除：红字(全站删除的红) */
.wk-contextmenus li.wk-contextmenus-danger {
    color: var(--chatdlm-danger);
}

/* 多选操作栏：整条居中一排，× 贴右边垂直居中 */
.wk-multiplepanel {
    width: 100%;
    height: 100%;
    position: relative;
}

.wk-multiplepanel-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.wk-multiplepanel-content-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 64px;
    padding: 10px 8px;
    box-sizing: border-box;
    border-radius: var(--chatdlm-icon-button-radius);
    color: var(--chatdlm-text-primary);
    cursor: pointer;
}

.wk-multiplepanel-content-item:hover {
    background-color: var(--chatdlm-overlay-hover);
}

.wk-multiplepanel-content-item-disabled,
.wk-multiplepanel-content-item-disabled:hover {
    color: var(--chatdlm-text-tertiary);
    background-color: transparent;
    cursor: default;
}

.wk-multiplepanel-content-item-title {
    font-size: 14px;
}

.wk-multiplepanel-close {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
}

/* 删除确认(收藏卡片页脚、多选栏共用，2026-11-10 从收藏页挪到这里)：一句红字提示 + 红色「删除」+「取消」 */
.chatdlm-favorites-card-action {
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--chatdlm-icon-button-radius);
}

.chatdlm-favorites-card-action:hover {
    background-color: var(--chatdlm-layer-selected);
}

.chatdlm-favorites-card-action-danger {
    color: var(--chatdlm-danger);
}

.chatdlm-favorites-card-confirm {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--chatdlm-danger);
}


.wk-conversationlist {
    height: 100%;
    overflow-y: auto;
    /* padding: 0px 5px; */
}

/* 会话行(2026-11-08 按微信「标准」同屏重测，截图像素 ÷ 1.5)：行高 97 像素 → 65px；头像 36 距左 18 像素 → 12px；字距头像 15 像素 → 10px；时间距右 20 像素 → 13px；
   名字 14px、摘要 12px、时间 10px(新测每字 21、18 像素，时间数字高 11 像素) */
.wk-conversationlist-item {
    height: var(--chatdlm-list-row-height);
    width: 100%;
    cursor: pointer;
    padding: 0px;                 /* 照微信：行通栏，选中底色铺满列表宽 */
    background-color: transparent;
    box-sizing: border-box;
}

/* 悬停和选中都画在同一层(内容层)上，避免两层颜色叠出边 */
.wk-conversationlist-item:hover .wk-conversationlist-item-content {
    background-color: var(--chatdlm-list-item-hover);
}

.wk-conversationlist-item-top {
    background-color: var(--chatdlm-list-item-hover) !important;
}

.wk-conversationlist-item-content {
    display: flex;
    height: 100%;
}

.wk-conversationlist-item-left {
    width: calc(var(--chatdlm-list-avatar-size) + 12px);
    display: flex;
    align-items: center;
    justify-content: flex-end;   /* 头像靠右：距左 12px(大档也是 12px) */
}

.wk-conversationlist-item-right {
    height: 100%;
    width: calc(100% - var(--chatdlm-list-avatar-size) - 12px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 13px;
    padding-left: 10px;

    flex-grow: 1;
    overflow: hidden;
    box-sizing: border-box;
}

.wk-conversationlist-item-avatar-box {
    position: relative;
    display: flex; /* 盒子高度 = 头像 36px(头像是行内图，原来底下多出几像素行高，在线点就跟着偏下) */
}

/* 未读数(2026-11-07 用户定「参考微信的位置」)：压在头像右上角，往外探出半个角标；数字多了往左长 */
.wk-conversationlist-item-avatar-unread {
    position: absolute;
    top: -7px;
    right: -7px;
    z-index: 1;
    line-height: 0;
}

.wk-conversationlist-item-right-first-line {
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.wk-conversationlist-item-right-second-line {
    display: flex;
}

.wk-conversationlist-item-name {
    display: flex;
    width: 100%; 
    flex: 1 1;
    align-items: center;

   
}

.wk-conversationlist-item-name h3 {
    font-size: var(--chatdlm-list-name-font-size);
    line-height: var(--chatdlm-list-name-line-height);
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: auto;
    max-width: 80%;
}

.wk-conversationlist-item-name h3 {
    color: var(--chatdlm-text-primary);
}



.wk-conversationlist-item-time {
    color: var(--chatdlm-text-tertiary);
    padding-left: 10px;
    flex-shrink: 0;
    font-size: var(--chatdlm-list-time-font-size);
    line-height: 1;
    display: flex;
    align-items: center;
    margin-left: auto;
}




.wk-conversationlist-item-lastmsg {
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--chatdlm-text-tertiary);
    overflow: hidden;
    font-size: var(--chatdlm-list-preview-font-size);
    line-height: var(--chatdlm-list-preview-line-height);
    min-height: var(--chatdlm-list-preview-line-height);
}



/* 选中行照微信：主色通栏、名字白、摘要和时间白 70% */
.wk-conversationlist-item-selected,
.wk-conversationlist-item-selected:hover {
    background-color: var(--chatdlm-brand) !important;
}

.wk-conversationlist-item-selected .wk-conversationlist-item-name h3 {
    color: var(--chatdlm-on-brand);
}

.wk-conversationlist-item-selected .wk-conversationlist-item-lastmsg,
.wk-conversationlist-item-selected .wk-conversationlist-item-time,
.wk-conversationlist-item-selected .wk-typing {
    color: var(--chatdlm-on-brand-secondary);
}

.wk-mention {
    color: var(--chatdlm-danger);
}

.wk-reminder {
    color: var(--chatdlm-danger);
}

.wk-onlinestatusbadge {
    background-color: var(--wk-color-item);
    position: absolute;
    padding: 1.5px;
    transform: scale(0.6);
    right: -10px;
    bottom: -5px;
    border-radius: 10px;

}
/* 在线点(2026-11-07 用户定)：不要外圈描边，要发光；离头像右边、下边一样远(各 3px)，不再缩放。
   点的样子只在这里定一份：会话列表头像上的、聊天顶栏「在线」后面的(2026-11-11)共用 */
.wk-onlinestatusbadge-empty.wk-onlinestatusbadge,
.chatdlm-online-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    transform: none;
    border-radius: 50%;
    /* 点本身八成五不透明、光晕四成五：不抢头像(2026-11-07 用户定「小一点，稍微透明一点」) */
    background-color: color-mix(in srgb, var(--chatdlm-brand) 85%, transparent);
    box-shadow: 0 0 4px color-mix(in srgb, var(--chatdlm-brand) 45%, transparent);
}

.wk-onlinestatusbadge-empty.wk-onlinestatusbadge {
    right: 3px;
    bottom: 3px;
}

.wk-onlinestatusbadge-content {
    background-color: var(--chatdlm-layer-static);
    padding: 0px 5px;
    border-radius: 10px;
}
.wk-onlinestatusbadge-content-tip {
    padding: 0px;
    font-size: 14px;
    color: var(--chatdlm-brand);
    
}

.wk-onlinestatusbadge-empty .wk-onlinestatusbadge-content {
    display: none;
}

/* 独立窗口的外框(见 index.tsx)：铺满整个窗口；顶上一条窗口横条照主窗口(.chatdlm-title-strip，高度、底色、拖动、窗口按钮都是那一份)，
   左边多一个标题，字号、颜色照会话列表的摘要(12px、次级字)；下面是内容 */
.chatdlm-independent-window {
    height: 100vh;
    background-color: var(--chatdlm-page-background);
    color: var(--chatdlm-text-primary);
}

.chatdlm-independent-window-frame {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.chatdlm-independent-window-title {
    flex: 1 1;
    min-width: 0;
    display: flex;
    align-items: center;
    padding-left: 12px;
    font-size: var(--chatdlm-list-preview-font-size);
    color: var(--chatdlm-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 笔记、白板的工具栏跟右边助理聊天头部一样高，两条底线对齐(2026-11-12 用户定：要对齐)；不开助理也是这个高，开关时不跳 */
.chatdlm-independent-window-body .chatdlm-note-editor-toolbar {
    height: var(--wk-height-chat-conversation-header);
    box-sizing: border-box;
}

/* 标题条下面：左边是内容，右边可以展开助理(见 Components/WindowAssistantPane) */
.chatdlm-independent-window-body {
    flex: 1 1;
    min-height: 0;
    display: flex;
}

.chatdlm-independent-window-content {
    flex: 1 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* 拖卡片时跟着鼠标的那张小卡片(见 index.tsx 的 startDragOut)：照收藏卡片的底色、圆角，浮起来的阴影；只写标题 */
.chatdlm-drag-ghost {
    position: fixed;
    z-index: 10001;
    pointer-events: none;
    max-width: 220px;
    padding: 8px 12px;
    border-radius: var(--chatdlm-bubble-radius);
    border: var(--wk-line);
    background-color: var(--chatdlm-page-background);
    box-shadow: var(--semi-shadow-elevated);
    color: var(--chatdlm-text-primary);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: .92;
}

.wk-chat {
    width: 100%;
    height: 100%;
}

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

.wk-chat-content-left {
    width: var(--wk-wdith-conversation-list);
    height: 100%;
    border-right: var(--wk-line);
    background-color: var(--chatdlm-list-background);
}

.wk-chat-search {
    height: var(--wk-height-chat-search);
    width: 100%;
    padding: 0px 12px 0px 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 加号按钮样式走 .chatdlm-icon-button，只把方块收小到微信实测的尺寸(会话、助理两页共用这一条) */
.wk-chat-search .wk-chat-search-add {
    width: var(--chatdlm-search-add-size);
    height: var(--chatdlm-search-add-size);
}

.wk-chat-title {
    width: 250px;
    font-size: 24px;
    font-weight: 500;
}

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

.wk-chat-conversation-list {
    width: 100%;
    height: calc(100% - var(--wk-height-chat-search));
}

.wk-chat-content-right {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
}

@media screen and (max-width: 640px)  {
    .wk-chat-content-right {
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        transform: translate3d(0, 0, 0);
        transition: transform var(--wk-layer-transition);
    }

   .wk-chat-content:not(.wk-conversation-open) .wk-chat-content-right {
        transform: translate3d(100vw, 0, 0);
    }

    .wk-chat-content-left {
        width: 100%;
    }

    .wk-chat-conversation-header-back {
        display: flex !important;
    }
}

.wk-chat-content-chat {
    width: 100%;
    height: 100%;
    transition: width 150ms ease-in-out 0s;
}

.wk-chat-content-right.wk-chat-channelsetting-open .wk-chat-content-chat {
    width: calc(100% - var(--wk-wdith-chat-channelsetting));
}

.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);
}

/* 没选会话时右栏正中：大号站标，灰(选中那一档灰：浅色 #D9D9D9、深色 #3D3E3F，跟着主题走)，照微信空白页那个灰标 */
.wk-chat-empty-logo {
    width: 200px;
    height: 200px;
    background-color: var(--chatdlm-layer-selected);
}

.wk-chat-conversation-header {
    height: var(--wk-height-chat-conversation-header);
    width: 100%;
    background-color: var(--chatdlm-page-background);
    display: flex;
    align-items: center;
    border-bottom: var(--wk-line);
    z-index: 11;
    padding: 0.5rem 0.8125rem 0.5rem var(--chatdlm-chat-title-left);
    position: relative;
    cursor: pointer;
    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;
}

.wk-chat-conversation-header-back {
    width: 40px;
    height: 40px;
    display: none;
    position: relative;
    justify-content: center;
    align-items: center;
}

.wk-chat-conversation-header-back-icon {
    position: absolute;
    /* transform: rotate(-45deg); */
    transform: rotate(180deg);
}

.wk-chat-conversation-header-back-icon::before, .wk-chat-conversation-header-back-icon::after {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
}

.wk-chat-conversation-header-back-icon::after {
    transform: rotate(-45deg) scaleX(0.75) translate(0, 0.375rem);
}

.wk-chat-conversation-header-back-icon::before {
    transform: rotate(45deg) scaleX(0.75) translate(0, -0.375rem);
}

.wk-chat-conversation-header-back-icon, .wk-chat-conversation-header-back-icon::before, .wk-chat-conversation-header-back-icon::after {
    width: 1.125rem;
    height: 0.125rem;
    border-radius: 0.125rem;
    background-color: var(--chatdlm-text-secondary);
    transition: transform var(--wk-slide-transition);
}


.wk-chat-conversation-header-channel {
    display: flex;
}

/* 照微信：聊天头部只显示对方昵称，不显示头像(元素保留) */
.wk-chat-conversation-header-channel-avatar {
    display: none;
}

.wk-chat-conversation-header-channel-avatar img {
    width: 40px;
    height: 40px;
    border-radius: var(--chatdlm-avatar-radius);
}

.wk-chat-conversation-header-channel-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* 在线状态副行(照 Telegram)：次级色；有副行时昵称收一档、行高收紧，两行合起来仍在头部里。
   字号随「字体大小」变(2026-11-11)：跟会话列表一行的「名字 + 摘要」用同一组字号(中档 14/12，大档 19/16)，行高比列表各紧 2px(中档仍是原来的 18/16) */
.wk-chat-conversation-header-channel-info-tip {
    font-size: var(--chatdlm-list-preview-font-size);
    line-height: calc(var(--chatdlm-list-preview-line-height) - 2px);
    color: var(--chatdlm-text-secondary);
    white-space: nowrap;
}

/* 「在线」后面的发光点(2026-11-11 用户定)：点的样子跟会话列表头像上的在线点是同一份(.chatdlm-online-dot)，这里只管跟字的间距和对齐 */
.wk-chat-conversation-header-channel-info-tip .chatdlm-online-dot {
    display: inline-block;
    margin-left: 6px;
    vertical-align: 1px;
}

.wk-chat-conversation-header-channel-info-tip:not(:empty) ~ .wk-chat-conversation-header-channel-info-name,
.wk-chat-conversation-header-channel-info:has(.wk-chat-conversation-header-channel-info-tip) .wk-chat-conversation-header-channel-info-name {
    font-size: var(--chatdlm-list-name-font-size);
    line-height: calc(var(--chatdlm-list-name-line-height) - 2px);
}

.wk-chat-conversation-header-channel-info-name {
    margin-left: 0px;
    font-size: var(--chatdlm-chat-title-font-size);
    font-weight: 400;
    color: var(--chatdlm-text-primary);
}

body[theme-mode=dark] .wk-chat-conversation-header-channel-info-name  {
    color: var(--chatdlm-text-primary);
}

.wk-chat-conversation-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.wk-chat-conversation-header-right {
    display: flex;
    align-items: center;
}

/* 头部按钮尺寸由 .chatdlm-icon-button 统一给，这里只管间距 */
.wk-chat-conversation-header-right > div {
    margin-right: 8px;             /* 微信实测相邻按钮中心距 60 像素 = 方块 32 + 间距 8 */
}

.wk-chat-conversation-header-right > div:last-child {
    margin-right: 0px;
}

.wk-chat-conversation-header-setting {
    display: flex;
    align-items: center;
}

/* 聊天信息面板(照微信)：挂在聊天头部下方，不遮住头部的「…」；页面底色，左边一条线。
   收起时宽度是 0、贴在聊天页右边里面，展开时宽度拉开、里面的内容跟着左边一起滑进来。
   (原来是靠负边距藏到聊天页右边外面：右边挨着别的东西(独立窗口展开的助理、第三栏)时，藏着的面板会盖在上面，2026-11-12 实测) */
.wk-chat-channelsetting {
    pointer-events: auto;
    width: 0;
    height: calc(100% - var(--wk-height-chat-conversation-header));
    transition: width 150ms ease-in-out 0s;
    position: absolute;
    z-index: 99;
    top: var(--wk-height-chat-conversation-header);
    right: 0;
    overflow: hidden;
}

.wk-chat-content-right > .wk-chat-channelsetting > * {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--wk-wdith-chat-channelsetting);
    box-sizing: border-box;
    background-color: var(--chatdlm-page-background);
    border-left: var(--wk-line);
}






.wk-chat-content-right.wk-chat-channelsetting-open .wk-chat-content-chat {
    width: 100%;
}

.wk-chat-content-right.wk-chat-channelsetting-open .wk-chat-channelsetting {
    width: var(--wk-wdith-chat-channelsetting);
}

.wk-chat-conversation-list-loading {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.wk-chatmenuspopover {
    width: 100%;
    height: 100%;
}

.wk-chatmenuspopover ul {
    margin-bottom: 0px;
    width: 100%;
    height: 100%;
}

body[theme-mode=dark] .wk-chat-popover {
    background-color: var(--wk-color-secondary);
    color: var(--chatdlm-text-primary);
    --color-popover-bg-default: var(--chatdlm-page-background)
}

.wk-chatmenuspopover li {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px;
}

.wk-chatmenuspopover li:first-child {
    margin-top: 0px;
}

.wk-chatmenuspopover li img {
    width: 20px;
    height: 20px;
    color: var(--chatdlm-text-primary);
}

.wk-chatmenuspopover-title {
    margin-left: 10px;
    font-size: 14px;
}

/* 菜单项鼠标移上去出底色(加号菜单、收藏面板、助理权限都是这一套) */
.wk-chatmenuspopover li:hover {
    background-color: var(--chatdlm-layer-hover);
}

/* 带说明的菜单项(输入框的收藏面板、助理权限，2026-11-09)：标题一行 + 灰字说明一行，右边可以打勾；字号、颜色照会话列表的名字和摘要 */
.chatdlm-popover-title {
    padding: 6px 10px 2px 10px;
    font-size: 12px;
    color: var(--chatdlm-text-tertiary);
}

.chatdlm-popover-item-text {
    flex: 1 1;
    min-width: 0;
    margin-left: 10px;
}

.chatdlm-popover-item-title {
    margin-left: 0;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chatdlm-popover-item-description {
    font-size: 12px;
    line-height: 18px;
    color: var(--chatdlm-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chatdlm-popover-item-check {
    width: 18px;
    margin-left: 10px;
    display: flex;
    color: var(--chatdlm-brand);
    flex-shrink: 0;
}

.chatdlm-popover-empty {
    padding: 16px 20px;
    font-size: 12px;
    color: var(--chatdlm-text-tertiary);
}

.chatdlm-permission-popover {
    width: 330px;
}

.wk-chat-conversation-header-right-item {
    position: relative;
}

/* 头部按钮的悬停层改走 .chatdlm-icon-button，原 mask 不再使用 */

/* 桌面版无系统标题栏：顶部两条可以按住拖动窗口 */
.wk-chat-search,
.wk-chat-conversation-header {
    -webkit-app-region: drag;
}

/* 里面能点的东西不参与拖动，否则点不动 */
.wk-chat-search > *,
.wk-chat-conversation-header-left,
.wk-chat-conversation-header-right {
    -webkit-app-region: no-drag;
}

/* 窗口按钮已在顶部横条里，聊天头部不再让位 */

/* 盖在拖动区域上面的浮层(聊天信息面板、弹窗、下拉菜单)必须声明不参与拖动,
   否则点击会被下面的拖动区域吞掉 */
.wk-chat-channelsetting,
.semi-portal,
.semi-portal * {
    -webkit-app-region: no-drag;
}

/* 头部右侧按钮样式走 .chatdlm-icon-button */

/* 会话列表顶部搜索框(照微信)：深色比列表亮一档，浅色是页面白 */
.chatdlm-search-box {
    flex: 1 1;
    height: var(--chatdlm-search-box-height);
    margin-right: 10px;          /* 搜索框到加号方块 15 像素 */
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 4px;
    background-color: var(--chatdlm-search-background);
    color: var(--chatdlm-text-tertiary);
    cursor: pointer;
    box-sizing: border-box;
}

.chatdlm-search-box:hover {
    color: var(--chatdlm-text-secondary);
}

.chatdlm-search-box-placeholder {
    font-size: var(--chatdlm-search-placeholder-font-size);             /* 微信「搜索」新测每字 18 像素 → 12px(原 14px) */
}

/* 真输入框版本(通讯录)：输入框透明，外观与会话列表的搜索框一致 */
.chatdlm-search-box-input {
    margin-right: 0;
    cursor: text;
}

.chatdlm-search-box-field {
    flex: 1 1;
    min-width: 0;
    padding: 0; /* 去掉输入框自带的左右 2px 内边距，字跟会话页的「搜索」左边对齐 */
    margin: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--chatdlm-search-placeholder-font-size);
    font-family: inherit;
    color: var(--chatdlm-text-primary);
}

.chatdlm-search-box-field::-moz-placeholder {
    color: var(--chatdlm-text-tertiary);
}

.chatdlm-search-box-field::placeholder {
    color: var(--chatdlm-text-tertiary);
}


.wk-sections {
    
}

.wk-section {
  margin-top: 10px;
}

.wk-section:first-child {
  margin-top: 0px;
}

.wk-section-rows {

}

.wk-section-title {
  padding: 5px 15px;
  color: var( --wk-color-font-tip);
  font-size: 13px;
}

.wk-section-row {

}

.wk-section-subtitle {
  padding: 5px 15px;
  color: var( --wk-color-font-tip);
  font-size: 13px;
}


:root {
    --wk-channelsetting-header: 56px;
}

.wk-channelsetting {
    width: 100%;
    height: 100%;
    background-color: var(--wk-color-secondary);
}

.wk-channelsetting-header {
    width: 100%;
    height: 56px;
    height: var(--wk-channelsetting-header);
    padding: 0.5rem 0.8125rem;
    display: flex;
    align-items: center;
}

.wk-channelsetting-close {
    width: 44px;
    height: 44px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
}

.wk-channelsetting-close:hover {
    background-color: var(--chatdlm-overlay-hover);
}

.wk-channelsetting-close-icon {
    position: absolute;
    transform: rotate(-45deg);
}

.wk-channelsetting-close-icon,.wk-channelsetting-close-icon::before,.wk-channelsetting-close-icon::after {
    width: 1.125rem;
    height: 0.125rem;
    border-radius: 0.125rem;
    background-color: var(--chatdlm-text-secondary);
    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.375rem);
}

.wk-state-back::after {
    transform: rotate(-45deg) scaleX(0.75) translate(0, 0.375rem);
}




.wk-channelsetting-box {
    width: 100%;
    height: calc(100% - 56px);
    height: calc(100% - var(--wk-channelsetting-header));
    overflow: hidden;
    position: relative;
}

.wk-channelsetting-content {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding-bottom: 40px;
}

.wk-channelsetting-channel-info {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: var(--chatdlm-page-background);

}

.wk-channelsetting-avatar {
    /* 高宽比率 */
    width: 64px;
    height: 64px; 
    position: relative;
}

.wk-channelsetting-avatar img {
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: var(--chatdlm-avatar-radius);
}

.wk-channelsetting-name {
    color: var(--wk-color-theme);
    font-size: 16px;
    font-weight: 600;
    margin-left: 10px;
    font-weight: 500px;
}


.wk-channelsetting-header-title-box {
    color: var(--chatdlm-text-tertiary);
   display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    flex: 1 1;
}

.wk-channelsetting-header-title-box-open {

}

.wk-channelsetting-header-title {
    font-size: 18px;
    font-weight: 500;
    margin-left: 1.375rem;
    color: var(--chatdlm-text-primary);
}

.wk-channelsetting-header-title-box-open .wk-channelsetting-header-title{
    display: none;
}

.wk-channelsetting-header-title-route {
    font-size: 18px;
    font-weight: 500;
    margin-left: 1.375rem;
    color: var(--chatdlm-text-primary);
    position: absolute;

    transform: translate3d(100vw, 0, 0);
    transition: transform var(--wk-layer-transition);
    width: 240px;

}

.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: 10px;
}

.wk-channelmanage {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
/* ===== 聊天信息面板照微信(1.5 倍截图实测：头像 54 像素→36px、行字 16px、行高 41px；分组之间一条线) ===== */
.wk-chat-channelsetting .wk-channelsetting,
.wk-chat-channelsetting .wk-route-header,
.wk-chat-channelsetting .wk-route-content,
.wk-chat-channelsetting .wk-route-content-next {
    background-color: var(--chatdlm-page-background);
}

.wk-chat-channelsetting .wk-channelsetting-content {
    padding: 16px 0 24px;
}

/* 成员格：36px 圆角方头像，名字 12px 次级色；添加/移除是虚线方框 */
.wk-chat-channelsetting .wk-subscribers-content {
    padding: 0 12px;
    gap: 4px 0;
}

.wk-chat-channelsetting .wk-subscribers-item {
    width: 52px;
    height: 64px;
}

.wk-chat-channelsetting .wk-subscribers-item img {
    width: 36px;
    height: 36px;
    border-radius: var(--chatdlm-avatar-radius);
}

.wk-chat-channelsetting .wk-subscribers-item-action {
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    border: 1px dashed var(--chatdlm-text-tertiary);
    border-radius: var(--chatdlm-avatar-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--chatdlm-text-secondary);
}

.wk-chat-channelsetting .wk-subscribers-item:hover .wk-subscribers-item-action {
    color: var(--chatdlm-text-primary);
    border-color: var(--chatdlm-text-secondary);
}

.wk-chat-channelsetting .wk-subscribers-item-name,
body[theme-mode=dark] .wk-chat-channelsetting .wk-subscribers-item-name {
    color: var(--chatdlm-text-secondary);
    margin-top: 6px;
}

.wk-chat-channelsetting .wk-subscribers-more {
    color: var(--chatdlm-text-secondary);
    font-size: 13px;
}

/* 分组：之间一条线，不留灰缝 */
.wk-chat-channelsetting .wk-section {
    margin-top: 0;
    border-top: var(--wk-line);
    padding: 6px 0;
}

.wk-chat-channelsetting .wk-section:first-child {
    border-top: none;
}

.wk-chat-channelsetting .wk-section-title,
.wk-chat-channelsetting .wk-section-subtitle {
    color: var(--chatdlm-text-tertiary);
    padding: 4px 20px;
}

/* 行：透明底、16px 字、41px 高、左右 20px；悬停列表悬停色 */
.wk-chat-channelsetting .wk-list-item,
body[theme-mode=dark] .wk-chat-channelsetting .wk-list-item {
    background-color: transparent;
    padding: 0 20px;
    min-height: 41px;
}

.wk-chat-channelsetting .wk-list-item:hover {
    background-color: var(--chatdlm-list-item-hover);
}

.wk-chat-channelsetting .wk-list-item-ripple:after {
    display: none;
}

.wk-chat-channelsetting .wk-list-item-title,
body[theme-mode=dark] .wk-chat-channelsetting .wk-list-item-title {
    font-size: 16px;
    color: var(--chatdlm-text-primary);
}

.wk-chat-channelsetting .wk-list-item-subtitle,
.wk-chat-channelsetting .wk-list-item-subtitle-muliteline {
    color: var(--chatdlm-text-secondary);
    font-size: 14px;
}

/* 危险操作(清空聊天记录)：红字居中 */
.wk-chat-channelsetting .wk-list-item-title[style*="--chatdlm-danger"] {
    color: var(--chatdlm-danger) !important;
}

/* 开关跟主色 */
.wk-chat-channelsetting .semi-switch-checked {
    background-color: var(--chatdlm-brand);
}


.wk-route {
    width: 100%;
    height: 100%;
    --wk-height-route-header: 56px;
}

.wk-route-header {
    width: 100%;
    height: var(--wk-height-route-header);
    padding: 0.5rem 0.8125rem;
    display: flex;
    align-items: center;
    background-color: var(--wk-color-secondary);
}

.wk-route-box {
    width: 100%;
    height: calc(100% - var(--wk-height-route-header));
    position: relative;
}

.wk-route-content {
    width: 100%;
    height: 100%;
    background-color: var(--wk-color-secondary);
    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: var(--wk-color-secondary);
   overflow: auto;
   /* transition: opacity 350ms ease-in 0s; */
}

.wk-route-header-close {
    width: 44px;
    height: 44px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
}

.wk-route-header-close:hover {
    background-color: var(--chatdlm-overlay-hover);
}

.wk-route-header-close-icon {
    position: absolute;
    transform: rotate(-45deg);
}

.wk-route-header-close-icon,.wk-route-header-close-icon::before,.wk-route-header-close-icon::after {
    width: 1.125rem;
    height: 0.125rem;
    border-radius: 0.125rem;
    background-color: var(--chatdlm-text-secondary);
    transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
}

.wk-route-header-close-icon::before {
    transform: rotate(90deg);
}

.wk-route-header-close-icon::before ,.wk-route-header-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.375rem);
}

.wk-state-back::after {
    transform: rotate(-45deg) scaleX(0.75) translate(0, 0.375rem);
}




.wk-route-header-title-box {
    color: var(--chatdlm-text-tertiary);
   display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    flex: 1 1;
}

.wk-route-header-title-box-open {

}

.wk-route-header-title {
    font-size: 18px;
    font-weight: 500;
    margin-left: 1.375rem;
    color: var(--chatdlm-text-primary);
}

body[theme-mode=dark]  .wk-route-header-title {
    color: var(--chatdlm-text-primary);
}


.wk-route-header-title-box-open .wk-route-header-title{
    display: none;
}

.wk-route-header-title-next {
    font-size: 18px;
    font-weight: 500;
    margin-left: 1.375rem;
    color: var(--chatdlm-text-primary);
    position: absolute;
    opacity: 0;
    transform: translate3d(100vw, 0, 0);
    transition: transform var(--wk-layer-transition),opacity 500ms ease-in 0s;
    width: 180px;

}

body[theme-mode=dark] .wk-route-header-title-next {
    color: var(--chatdlm-text-primary);
}

.wk-route-header-title-box-open .wk-route-header-title-next {
    transform: translate3d(0, 0, 0);
    opacity:1;
}

.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-route-header-right-view {
    opacity: 0;
    transition: opacity 500ms ease-out;
}

.wk-route-header-right-view-open {
    opacity: 1;
}




/* 根页无头：头隐藏，内容占满 */
.wk-route-headerless > .wk-route-header {
    display: none;
}

.wk-route-headerless > .wk-route-box {
    height: 100%;
}


.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;
}

.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: 10px;
    border-radius: 4px;
    cursor: pointer;

}

.wk-item-contacts:hover {
    background-color: var(--chatdlm-layer-hover); /* Change this color to your desired hover color */
}

body[theme-mode=dark] .wk-item-contacts:hover {
    background-color: var(--chatdlm-layer-hover); /* Change this color to your desired hover color */
}

.wk-item-contacts-name {
    margin-left: 15px;
    color: var(--wk-text-item);
    font-size: 14px;
    font-weight: 500;
}

body[theme-mode=dark] .wk-item-contacts-name {
    color: var(--chatdlm-text-primary);
}


mark {
    background-color: transparent; /* 移除默认背景色 */
    color: var(--wk-color-theme); /* 设置文本颜色为红色，可以根据需要更改 */
}

.wk-item-group {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
}


body[theme-mode=dark] .wk-item-group:hover {
    background-color: var(--chatdlm-layer-hover); /* Change this color to your desired hover color */
}

.wk-item-group:hover {
    background-color: var(--chatdlm-layer-hover); /* Change this color to your desired hover color */
}

.wk-item-group-name {
    margin-left: 15px;
    color: var(--chatdlm-text-primary);
    font-size: 14px;
    font-weight: 500;
}

body[theme-mode=dark] .wk-item-group-name {
    color: var(--chatdlm-text-primary);
}






.wk-item-message {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;

}

.wk-item-message:hover {
    background-color: var(--chatdlm-layer-hover); /* Change this color to your desired hover color */
}
body[theme-mode=dark] .wk-item-message:hover {
    background-color: var(--chatdlm-layer-hover); /* 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: 200px;
    max-width: 420px;

}

.wk-item-message-name {
    margin-left: 15px;
    color: var(--chatdlm-text-primary);
    font-size: 14px;
    font-weight: 500;
    grid-column: 1 / 2; /* 第一列 */
    grid-row: 1 / 2; /* 第一行 */
}

body[theme-mode=dark] .wk-item-message-name {
    color: var(--chatdlm-text-primary);
}


.wk-item-message-digest {
    margin-left: 15px;
    color: var(--chatdlm-text-tertiary);
    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: 42px;
    height: 42px;
    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: 10px;
    border-radius: 4px;
}

.wk-item-file:hover {
    background-color: var(--chatdlm-layer-hover); /* Change this color to your desired hover color */
}

body[theme-mode=dark] .wk-item-file:hover {
    background-color: var(--chatdlm-layer-hover); /* 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: 15px;
    color: var(--wk-text-item);
    font-size: 14px;
    font-weight: 500;
}

.wk-item-file-desc {
    grid-row: 2 / 3; /* 第二行 */
    grid-column: 2 / 3; /* 第二列 */
    display: flex;
    margin-left: 15px;
    color: var(--chatdlm-text-secondary);
    font-size: 12px;
    align-items: center;
}

.wk-item-file-line {
    width: 1px;
    height: 8px;
    background-color: var(--chatdlm-text-secondary);
    margin-top: 10px;
    margin-bottom: 10px;
    margin: 4px;
}
.wk-tab-file {
    width: 100%;
    height: 50vh;
    display: flex;
    overflow: auto;
    flex-direction: column;
    cursor: pointer;
}
/* 搜索框的下拉：行的样子照加号菜单(.wk-chatmenuspopover li)，这里只加「上下键选中」的底色(跟鼠标移上去同一个)和跟框里同开头的主色 */
.chatdlm-search-suggestion li.chatdlm-search-suggestion-active {
    background-color: var(--chatdlm-layer-hover);
}

.chatdlm-search-suggestion-title {
    flex: 1 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chatdlm-search-suggestion-match {
    color: var(--chatdlm-brand);
}

/* 能拖的分界线(见 index.tsx)：看得见的线还是那一栏自己的 1px 边线；这里是一条 8px 宽、透明的抓手骑在线上，
   鼠标移上去(或正在拖)抓手中间亮出 2px 主色线；颜色只用主色变量 */
.chatdlm-pane-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    z-index: 3;
    cursor: col-resize;
    -webkit-app-region: no-drag;
}

.chatdlm-pane-divider-left {
    left: -4px;
}

.chatdlm-pane-divider-right {
    right: -4px;
}

.chatdlm-pane-divider::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 3px;
    width: 2px;
    background-color: transparent;
    transition: background-color .15s;
}

/* 停一下才亮：鼠标只是路过不闪 */
.chatdlm-pane-divider:hover::after {
    background-color: var(--chatdlm-brand);
    transition-delay: .15s;
}

.chatdlm-pane-divider-dragging::after {
    background-color: var(--chatdlm-brand);
    transition-delay: 0s;
}

/* 拖的时候铺满窗口的透明罩子：光标一直是左右箭头，不选中字，网页框不吃鼠标 */
.chatdlm-pane-divider-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    cursor: col-resize;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    -webkit-app-region: no-drag;
}


.wk-layout {
    --wk-width-layout-tab: 60px;
    --wk-height-layout-tab-min: 60px;
    --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;
    overflow: hidden;
}

.wk-layout-tab {
    width: var(--wk-width-layout-tab);
    height: 100%;
}

.wk-layout-main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 顶部窗口按钮横条：Windows 桌面版 32px(按钮全是自己画的，不再让出系统按钮的位置)，网页版、Mac 为 0；颜色同导航栏，横贯整个窗口 */
.chatdlm-title-strip {
    height: var(--chatdlm-title-strip-height);
    flex-shrink: 0;
    background-color: var(--chatdlm-navigation-background);
    -webkit-app-region: drag;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    box-sizing: border-box;
}

.chatdlm-title-strip-buttons {
    display: flex;
    height: 100%;
}

/* 顶条按钮(置顶)：与 Windows 窗口按钮同宽 46px、同高，方形，悬停出底色；三层同图标按钮 */
.chatdlm-title-strip-button {
    width: 46px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--chatdlm-text-secondary);
    cursor: pointer;
    -webkit-app-region: no-drag;
}

.chatdlm-title-strip-button:hover {
    color: var(--chatdlm-text-primary);
    background-color: var(--chatdlm-overlay-hover);
}

.wk-layout-content {
    width: 100%;
    height: calc(100% - var(--chatdlm-title-strip-height));
    display: flex;
}

.wk-layout-content-left {
    width: var( --wk-width-layout-content-left);
    flex-shrink: 0;
    height: 100%;
    position: relative; /* 右边线能拖(PaneDivider 贴着它) */
}

/* 右栏占左栏以外的地方；第三栏展开时跟它对半分(两边都是 flex: 1) */
.wk-layout-content-right {
    flex: 1 1;
    min-width: 0;
    height: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
}

/* 第三栏开着：中栏最窄 360px(WKLayout/index.tsx 的 middleMinimumWidth 同一个数)，再窄就挤第三栏 */
.wk-layout-tool-shown {
    --chatdlm-middle-minimum-width: 360px;
}

.wk-layout-tool-shown .wk-layout-content-right {
    min-width: var(--chatdlm-middle-minimum-width);
}

/* 窗口窄了：左栏收起；点了中栏标题前的「<」，左栏盖在中栏上(宽度跟中栏一样，在 index.tsx 里量)，中栏不动 */
.wk-layout-content {
    position: relative;
}

.wk-layout-left-collapsed .wk-layout-content-left {
    display: none;
}

.wk-layout-left-collapsed.wk-layout-left-showing .wk-layout-content-left {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: auto;
    z-index: 5;
    background-color: var(--chatdlm-list-background);
}

/* 中栏标题最前面的「<」：往左让出按钮的留白，跟标题对齐 */
.chatdlm-layout-back-button {
    margin-left: -8px;
    margin-right: 4px;
}

@media screen and (max-width: 640px)  {

    /* .wk-layout {
        flex-direction: column-reverse;
    }

    .wk-layout-tab {
        height: var(--wk-height-layout-tab-min);
        width: 100%;
    } */
    .wk-layout-content-right {
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        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-layout-content-left {
        width: 100%;
    }
}


.wk-list-item {
    width: 100%;
    padding: 1rem;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    background-color: var(--chatdlm-page-background);
    justify-content: space-between;
    box-sizing: border-box;
}

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

.wk-list-item:hover {
    background-color: var(--chatdlm-layer-hover);
}


.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, var(--chatdlm-text-secondary) 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-title {
    font-size: 15px;
    font-weight: 400;
    color: var(--chatdlm-text-primary);
}


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


.wk-list-item-action {
    display: inline-flex;
    align-items: center;
    position: relative;
    margin: 0;
    margin-left: auto;
}

.wk-list-item-subtitle {
    flex: 1 1;
    margin-left: 20px;
    font-size: 14px;
    color: var(--wk-color-font-tip);
    text-align: end;
    word-wrap: break-word;
    word-break: normal;
   
}

.wk-list-item-subtitle-oneline {
    display: inline-block;
    white-space: nowrap; 
    width: 100%; 
    overflow: hidden;
    text-overflow:ellipsis;

   
}

.wk-list-item-subtitle-muliteline {
    font-size: 14px;
    color: var(--chatdlm-text-secondary);
    margin-top: 10px;
    white-space:  pre-line;
    word-wrap:break-word;
}

.wk-list-item-arrow {
    margin-right: -10px;
}

.wk-list-item-arrow img{
    width: 9px;
    height: 14px;
}

.wk-list-item-tip {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wk-color-font-tip);
    font-size: 13px;

}
/* 聊天信息侧边栏里的背景、声音、记忆三页和工作区一格(2026-11-12)。字号、颜色都用侧边栏现有的：
   小标题照分组标题(三级字)，说明照分组说明(12px 次级字)，行照侧边栏的行；左右边距跟行一样 20px */

.chatdlm-chat-settings-page {
    padding: 8px 0 24px;
}

.chatdlm-chat-settings-label {
    padding: 12px 20px 8px;
    font-size: 13px;
    color: var(--chatdlm-text-tertiary);
}

.chatdlm-chat-settings-note {
    padding: 4px 20px 8px;
    font-size: 12px;
    color: var(--chatdlm-text-secondary);
}

.chatdlm-chat-settings-segment {
    padding: 0 20px 8px;
    flex-wrap: wrap;
}

.chatdlm-chat-settings-rows .wk-list-item-title {
    flex: 1 1;
}

.chatdlm-chat-settings-rows .wk-list-item-subtitle {
    display: flex;
    color: var(--chatdlm-brand);
}

.chatdlm-chat-settings-empty {
    padding: 32px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--chatdlm-text-tertiary);
}

.chatdlm-chat-settings-empty-title {
    margin: 12px 0 4px;
    font-size: 14px;
    color: var(--chatdlm-text-secondary);
}

/* 工作区：标题、文件夹一行、按钮，照参考竖着排 */
.chatdlm-chat-workspace {
    padding: 8px 20px 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.chatdlm-chat-workspace-title {
    font-size: 16px;
    color: var(--chatdlm-text-primary);
}

.chatdlm-chat-workspace-folder {
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--chatdlm-text-secondary);
}

.chatdlm-chat-workspace-folder span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 背景底纹：图标线条只取形状(mask)，颜色用「线」灰。
   聊天里：类名挂在 .wk-chat-conversation 上，底纹画在消息区(.wk-conversation-content)最底下一层，输入框那块不铺；跟着窗口不跟着滚动。
   选背景的小样：类名挂在小样自己身上 */
.chatdlm-chat-background .wk-conversation-content::before,
.chatdlm-chat-background-preview.chatdlm-chat-background::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-color: var(--chatdlm-layer-line);
    -webkit-mask-size: 240px 240px;
    mask-size: 240px 240px;
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
}

.chatdlm-chat-background .wk-conversation-messages {
    position: relative;
}

.chatdlm-chat-background-inspiration .wk-conversation-content::before,
.chatdlm-chat-background-preview.chatdlm-chat-background-inspiration::before { -webkit-mask-image: url(../../static/media/inspiration.fd7de319d216459dca80.svg); mask-image: url(../../static/media/inspiration.fd7de319d216459dca80.svg); }
.chatdlm-chat-background-research .wk-conversation-content::before,
.chatdlm-chat-background-preview.chatdlm-chat-background-research::before { -webkit-mask-image: url(../../static/media/research.929de7325c3756a0ba2c.svg); mask-image: url(../../static/media/research.929de7325c3756a0ba2c.svg); }
.chatdlm-chat-background-office .wk-conversation-content::before,
.chatdlm-chat-background-preview.chatdlm-chat-background-office::before { -webkit-mask-image: url(../../static/media/office.1bbaf262754b4039b0be.svg); mask-image: url(../../static/media/office.1bbaf262754b4039b0be.svg); }
.chatdlm-chat-background-code .wk-conversation-content::before,
.chatdlm-chat-background-preview.chatdlm-chat-background-code::before { -webkit-mask-image: url(../../static/media/code.66968c3ed795e043d0bb.svg); mask-image: url(../../static/media/code.66968c3ed795e043d0bb.svg); }
.chatdlm-chat-background-chat .wk-conversation-content::before,
.chatdlm-chat-background-preview.chatdlm-chat-background-chat::before { -webkit-mask-image: url(../../static/media/chat.ba5f13ebd45e6b9dd903.svg); mask-image: url(../../static/media/chat.ba5f13ebd45e6b9dd903.svg); }
.chatdlm-chat-background-daily .wk-conversation-content::before,
.chatdlm-chat-background-preview.chatdlm-chat-background-daily::before { -webkit-mask-image: url(../../static/media/daily.9f2426f1d8842d63822e.svg); mask-image: url(../../static/media/daily.9f2426f1d8842d63822e.svg); }

/* 选背景：一排 3 个小样，每个是一块聊天区(收到、发出两个小气泡)，下面写名字；选中的外圈照设置里颜色块的外圈 */
.chatdlm-chat-background-grid {
    padding: 4px 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 16px 12px;
    gap: 16px 12px;
}

.chatdlm-chat-background-choice {
    cursor: pointer;
    min-width: 0;
}

.chatdlm-chat-background-preview {
    height: 96px;
    border-radius: var(--chatdlm-bubble-radius);
    background-color: var(--chatdlm-page-background);
    border: var(--wk-line);
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 0 10px;
    position: relative;
}

.chatdlm-chat-background-preview > * {
    position: relative;
}

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

.chatdlm-chat-background-preview::before {
    -webkit-mask-size: 120px 120px;
    mask-size: 120px 120px;
}

.chatdlm-chat-background-choice:hover .chatdlm-chat-background-preview {
    box-shadow: 0 0 0 2px var(--chatdlm-layer-selected);
}

.chatdlm-chat-background-preview-selected,
.chatdlm-chat-background-choice:hover .chatdlm-chat-background-preview-selected {
    box-shadow: 0 0 0 2px var(--chatdlm-page-background), 0 0 0 4px var(--chatdlm-text-primary);
}

.chatdlm-chat-background-bubble {
    height: 14px;
    border-radius: var(--chatdlm-bubble-radius);
}

.chatdlm-chat-background-bubble-received {
    width: 55%;
    background-color: var(--chatdlm-bubble-received);
}

.chatdlm-chat-background-bubble-sent {
    width: 45%;
    align-self: flex-end;
    background-color: var(--chatdlm-brand);
}

.chatdlm-chat-background-title {
    margin-top: 6px;
    font-size: 12px;
    text-align: center;
    color: var(--chatdlm-text-secondary);
}

@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;
}

/* 全站表情字体(2026-11-12)：输入框、气泡、助理回答、会话列表、表情面板都用这一个，打出来和发出去长得一样。
   字体是 Microsoft Fluent Emoji Color 做的 COLRv1 矢量彩色字体(生成方法和为什么用这种格式见 apps/web/scripts/build-emoji-font.py)，
   unicode-range 只含表情的码点，正文的字不受影响。
   字体列表最前面插的是 var(--chatdlm-emoji-font,)：启动时 Service/EmojiFont.ts 先在画布上试画一个表情，画得出颜色才给 body 加 emoji-font=chatdlm，
   这个变量才有值；这台电脑显示不了这种彩色字体就不加，全站照旧用系统自带的表情(也是一套)，不会出现空白 */
@font-face {
    font-family: "ChatDLM Emoji";
    src: url(../../static/media/chatdlm-emoji.d8b5486e7f866b706538.woff2) format("woff2");
    unicode-range: U+231A-231B, U+23E9-23EC, U+23F0, U+23F3, U+25FD-25FE, U+2615, U+261D, U+2620, U+2639-263A, U+2648-2653, U+267F, U+2693, U+26A1, U+26AA-26AB, U+26BD-26BE, U+26C4-26C5, U+26CE, U+26D4, U+26EA, U+26F2-26F3, U+26F5, U+26FA, U+26FD, U+2705, U+270A-270D, U+2728, U+274C, U+274E, U+2753-2755, U+2757, U+2764, U+2795-2797, U+27B0, U+27BF, U+2B1B-2B1C, U+2B50, U+2B55, U+FE0F, U+1F004, U+1F0CF, U+1F18E, U+1F191-1F19A, U+1F201, U+1F21A, U+1F22F, U+1F232-1F236, U+1F238-1F23A, U+1F250-1F251, U+1F300-1F320, U+1F32D-1F335, U+1F337-1F33F, U+1F341-1F346, U+1F349-1F352, U+1F354-1F36C, U+1F36E-1F37C, U+1F37E-1F393, U+1F3A0-1F3AD, U+1F3AF-1F3CA, U+1F3CF-1F3D3, U+1F3E0-1F3F0, U+1F3F4, U+1F3F8-1F3F9, U+1F400-1F43E, U+1F440, U+1F442-1F469, U+1F46E-1F48E, U+1F490, U+1F492-1F4CD, U+1F4CF-1F4FC, U+1F4FF-1F529, U+1F52B-1F53D, U+1F54B, U+1F54D-1F54E, U+1F550-1F567, U+1F57A, U+1F590, U+1F595-1F596, U+1F5A4, U+1F5FB-1F64F, U+1F680-1F6C5, U+1F6CC, U+1F6D0-1F6D2, U+1F6D5-1F6D7, U+1F6DC-1F6DF, U+1F6EB-1F6EC, U+1F6F4-1F6FC, U+1F7E0-1F7EB, U+1F7F0, U+1F90C-1F93A, U+1F93C-1F945, U+1F947-1F9AF, U+1F9B4-1F9B7, U+1F9B9-1F9DA, U+1F9DC-1F9FF, U+1FA71-1FA7C, U+1FA80-1FA88, U+1FA90-1FAAB, U+1FAAD-1FAB3, U+1FAB5-1FABD, U+1FABF-1FAC5, U+1FACE-1FADB, U+1FAE0-1FAE8, U+1FAF0-1FAF8;
}

body[emoji-font=chatdlm] {
    --chatdlm-emoji-font: "ChatDLM Emoji",;
}

/* 全站字体只在这里定一次(2026-11-12)：表情字体 + Semi 那一串字体。
   原来 body 写的是另一串(Roboto…)，Semi 的 body[theme-mode=dark] 比它优先，结果浅色用这串、深色用 Semi 那串，两种模式字体不一样，深色下表情字体也插不进去；
   现在用更高的优先级(html body)统一成 Semi 那串(深色原来就是它)。Semi 的输入框、提示、弹层这些自己又写了一遍同一串字体，改成跟着 body 走，表情才一致 */
/* Windows 桌面版：窗口按钮自己画(Components/WindowControls)，顶条高 32px(微信实测 50 像素 → 32px)；启动时 App.tsx 给 body 加这个属性 */
body[window-controls=custom] {
    --chatdlm-title-strip-height: 32px;
}

html body,
html body[theme-mode=dark] {
    font-family: var(--chatdlm-emoji-font,) "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html body .semi-button,
html body .semi-badge-count,
html body .semi-checkbox,
html body .semi-modal,
html body .semi-typography,
html body .semi-tooltip-wrapper,
html body .semi-popover-wrapper,
html body .semi-dropdown,
html body .semi-input-wrapper,
html body .semi-input-default,
html body .semi-input-small,
html body .semi-input-large,
html body .semi-input-textarea,
html body .semi-notification-notice-content,
html body .semi-tabs-bar .semi-tabs-tab,
html body .semi-toast-content,
html body .semi-tree-option-list .semi-tree-option {
    font-family: inherit;
}

 :root, body {
    /* ===== ChatDLM 色板：全项目颜色只在这里定义，组件一律引用变量 ===== */
    /* 浅色 */
    --chatdlm-page-background: #FFFFFF;      /* 页面底 */
    --chatdlm-layer-static: #F2F2F2;         /* 静底 .10 */
    --chatdlm-layer-hover: #E8E8E8;          /* 悬停 .18 */
    --chatdlm-layer-line: #DFDFDF;           /* 线   .25 */
    --chatdlm-layer-selected: #D9D9D9;       /* 选中 .30 */
    --chatdlm-overlay-hover: rgba(128,128,128,.18); /* 叠在图标上的悬停层 */
    --chatdlm-text-primary: #202123;         /* 正文字 */
    --chatdlm-text-secondary: #6C757D;       /* 次级字、图标 */
    --chatdlm-text-tertiary: #ADB5BD;        /* 更弱一档的字 */
    --chatdlm-brand: #4285F4;                /* 主色：默认蓝；绿、黄见下面 body[theme-color] */
    --chatdlm-on-brand: #FFFFFF;             /* 主色上的字 */
    --chatdlm-on-brand-secondary: rgba(255,255,255,.7); /* 主色上的次级字(微信选中行摘要、时间实测白 70%) */
    /* 不随主题变 */
    --chatdlm-fixed-white: #FFFFFF;
    --chatdlm-fixed-near-black: #202123;
    --chatdlm-danger: #FF2442;               /* 未读角标、删除 */
    --chatdlm-mask: rgba(0,0,0,.5);          /* 遮罩 */
    /* 头像圆角：微信实测 75px 头像圆角约 10px(截图为 1.5 倍缩放)，约为边长的 14%；全站头像只认这一个值 */
    --chatdlm-avatar-radius: 14%;
    /* 应用标志(发现页的连接器等，不是头像)：跟方形头像同一个圆角，但不随「头像形状」变圆 */
    --chatdlm-logo-radius: 14%;
    /* 尺寸校准(2026-11-08 重做)：用户同一块屏幕(150% 缩放)上微信「标准」字号与 ChatDLM 并排截图实测，截图像素 ÷ 1.5 = 界面尺寸。
       原来那张参考图里微信字号调大了一档，头像、字、气泡跟着放大(边距、小三角不随字号变)，所以原值整体偏大；下面带「新测」的是这次重量的 */
    /* 消息区尺寸：从微信截图逐像素实测，截图为 1.5 倍缩放，下列为换算后的界面尺寸 */
    --chatdlm-chat-avatar-size: 36px;        /* 聊天头像：新测 54 像素(原 75 像素 → 50px) */
    --chatdlm-chat-side-margin: 20px;        /* 头像到聊天区左右边 30 像素 */
    --chatdlm-avatar-bubble-gap: 14px;       /* 头像到气泡矩形 21 像素 */
    --chatdlm-message-gap: 18px;             /* 上一条头像底到下一条头像顶：新测 27 像素 */
    /* 字体大小三档：中档 = 微信「标准」实测值，小/大各缩放 12%(未实测，可调)；档位由 body[font-size] 切换 */
    --chatdlm-font-scale: 1;
    --chatdlm-message-font-size: calc(14px * var(--chatdlm-font-scale));       /* 气泡字：新测每字 21 像素 → 14px(原 25px) */
    --chatdlm-message-name-font-size: calc(12px * var(--chatdlm-font-scale));  /* 群聊名字：原 21px 按气泡字同比(14/25)缩 */
    --chatdlm-message-time-font-size: calc(13px * var(--chatdlm-font-scale));  /* 时间：原 23px 按气泡字同比(14/25)缩 */
    --chatdlm-bubble-radius: 4px;            /* 气泡圆角：新测约 6～7 像素(原 12～13 像素 → 8px) */
    --chatdlm-bubble-padding: 9px 11px;      /* 单行气泡高：新测 54 像素 → 36px = 14 × 1.3125 + 上下各 9；文字距左边 18 像素(含字形左边距) */
    --chatdlm-bubble-arrow-width: 4.5px;     /* 小三角宽 7 像素 */
    --chatdlm-bubble-arrow-height: 10px;     /* 小三角高 14 像素 */
    --chatdlm-bubble-arrow-top: 13.5px;      /* 小三角中心距气泡顶 26 像素 */
    --chatdlm-chat-title-font-size: 14px;    /* 聊天头部标题：新测每字 21 像素 → 14px(原 19px)，常规字重；通讯录、发现、收藏的行字同它 */
    --chatdlm-chat-title-left: 16px;         /* 标题距聊天区左边 24 像素 */
    /* 图标按钮(悬停出圆角方块)：微信实测列表顶部加号方块 50 像素、聊天头部方块 47 像素 → 32px；导航方块 64 像素 → 42px，导航头像同尺寸对齐 */
    --chatdlm-icon-button-size: 32px;
    --chatdlm-title-strip-height: 0px; /* 顶部窗口按钮横条：网页版、Mac 没有；Windows 桌面版见下面 body[window-controls=custom] */
    --chatdlm-icon-button-radius: 6px;
    --chatdlm-nav-button-size: 36px;         /* 导航头像：新测 54 像素 → 36px(原 64 像素 → 42px) */
    --chatdlm-nav-button-gap: 12px;          /* 导航图标中心间距：新测 71～72 像素 → 48px，减方块 36 */
    /* 悬浮滚动条：微信实测拖条宽 10～11 像素 → 7px，贴右 3 像素 → 2px；浅色拖条沿用原项目滚动条灰 */
    --chatdlm-scrollbar-width: 7px;
    --chatdlm-scrollbar-margin: 2px;
    --chatdlm-scrollbar-thumb: rgba(0,0,0,.2);
    --chatdlm-scrollbar-thumb-hover: rgba(0,0,0,.35);
    --chatdlm-floating-dark: rgba(52,58,64,.85);    /* 深色浮层 */
    --chatdlm-floating-light: rgba(255,255,255,.85); /* 浅色浮层 */

    /* 区域（按微信的分层结构取上面的色板） */
    --chatdlm-navigation-background: var(--chatdlm-layer-line);
    --chatdlm-list-background: var(--chatdlm-layer-hover);
    --chatdlm-list-item-hover: var(--chatdlm-layer-line);
    --chatdlm-list-item-selected: var(--chatdlm-brand);   /* 选中行照微信铺主色 */
    --chatdlm-bubble-received: var(--chatdlm-layer-static);
    --chatdlm-search-background: var(--chatdlm-page-background);

    /* 唐僧叨叨原有变量，全部指向色板 */
    --wk-color-theme: var(--chatdlm-brand);
    --wk-color-secondary: var(--chatdlm-page-background);
    --wk-color-secondary-2: var(--chatdlm-page-background);
    --wk-color-hover: var(--chatdlm-layer-hover);
    /* 提示类型的字体颜色 */
    --wk-color-font-tip: var(--chatdlm-text-secondary);
    --wk-width-layout-content-left: 300px;
    --wk-wdith-conversation-list: var(--wk-width-layout-content-left);
    /* 列表顶部搜索行、聊天头部：新测 70～72 像素 → 48px(原 64px)，两边同高对齐 */
    --wk-height-chat-search: 48px;
    --wk-height-chat-conversation-header: 48px;
    --chatdlm-search-box-height: 26px;     /* 搜索框：新测 39 像素 → 26px(原跟图标方块 32px) */
    --chatdlm-search-add-size: 28px;       /* 搜索框右边的加号方块：同屏微信新测 42 像素 → 28px(原跟图标按钮通用的 32px)，加号图标 18px */
    --chatdlm-list-avatar-size: 36px;      /* 会话列表头像：新测 54 像素 → 36px(原 50px) */
    /* 会话列表行(助理列表同一套)：数值说明见 ConversationList/index.css；大档在下面 body[font-size=large] 里整组换 */
    --chatdlm-list-row-height: 65px;
    --chatdlm-list-name-font-size: 14px;
    --chatdlm-list-name-line-height: 20px;
    --chatdlm-list-preview-font-size: 12px;
    --chatdlm-list-preview-line-height: 18px;
    --chatdlm-list-time-font-size: 10px;
    --chatdlm-search-placeholder-font-size: 12px; /* 搜索框里的字 */
    --wk-wdith-chat-channelsetting: 300px;   /* 聊天信息面板：微信实测 378 像素 → 252px；为容下群成员选择等子页取 300px */
    --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: 1px solid var(--chatdlm-layer-line);
    --wk-line-color: var(--chatdlm-layer-line);

    --wk-color-item: var(--chatdlm-page-background);
    --wk-text-item: var(--chatdlm-text-primary);

    --wk-message-item: var(--chatdlm-page-background);
    --wk-message-color: var(--chatdlm-text-primary);

    --semi-color-primary: var(--chatdlm-brand);
    --semi-color-primary-hover: var(--chatdlm-brand);
    --semi-color-primary-active: var(--chatdlm-brand);
    --semi-color-danger: var(--chatdlm-danger);
  }

  *, *:before, *:after {
    box-sizing: inherit;
  }

  body[theme-mode=dark] {
    /* 深色：只换色板的值，变量名与浅色一一对应；深色不出品牌色 */
    --chatdlm-page-background: #202123;
    --chatdlm-layer-static: #2A2A2C;
    --chatdlm-layer-hover: #313234;
    --chatdlm-layer-line: #38393A;
    --chatdlm-layer-selected: #3D3E3F;
    --chatdlm-text-primary: #E8EAED;
    --chatdlm-text-secondary: #ADB5BD;
    --chatdlm-text-tertiary: #6C757D;
    /* 深色主色与浅色同一个值 #34A853(用户定)，不再黑白 */
    --chatdlm-scrollbar-thumb: rgba(255,255,255,.3);        /* 微信深色实测白 30% */
    --chatdlm-scrollbar-thumb-hover: rgba(255,255,255,.45);

    --chatdlm-navigation-background: var(--chatdlm-layer-static);
    --chatdlm-search-background: var(--chatdlm-layer-selected);

    color: #202123 !important;

    color: var(--chatdlm-text-primary) !important;
  }

  /* ::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(255,0,0,0.4);
  } */

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; */
    /* 字体统一定在文件开头(html body)，这里不再写 */
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background: #FFFFFF;
    background: var(--chatdlm-page-background);
    color: #202123;
    color: var(--chatdlm-text-primary);
  }

  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: #FFFFFF;
    background-color: var(--chatdlm-page-background);
  }
  
  .pageContent {
    padding: 0px 40px;
    overflow-y: auto;
  }
  
    .pageContent.space {
        padding-top: 40px;
        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: 15px 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: #FFFFFF;
    color: var(--chatdlm-fixed-white);
  }
/* 鼠标提示(Semi Tooltip)只是看的，不接鼠标(2026-11-10 用户报：「鼠标移动到上面的文本说明上，样式会闪烁」——
   提示贴着按钮弹出，鼠标划进提示框就算离开了按钮，提示收起、鼠标又落回按钮、提示又弹出，来回闪)。弹出菜单(Popover)不受影响 */
.semi-tooltip-wrapper {
    pointer-events: none;
}

/* 图标按钮：全站唯一一个抽象。静止次级字色 / 悬停正文字色+圆角方块 / 选中主色(由 .chatdlm-theme-icon-selected 给) */
.chatdlm-icon-button {
    width: 32px;
    width: var(--chatdlm-icon-button-size);
    height: 32px;
    height: var(--chatdlm-icon-button-size);
    border-radius: 6px;
    border-radius: var(--chatdlm-icon-button-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    color: #6C757D;
    color: var(--chatdlm-text-secondary);
    cursor: pointer;
    -webkit-app-region: no-drag;
}

.chatdlm-icon-button:hover {
    color: #202123;
    color: var(--chatdlm-text-primary);
    background-color: rgba(128,128,128,.18);
    background-color: var(--chatdlm-overlay-hover);
}

/* 纯线条图标(汉堡菜单)的选中态：线变主色，不填实 */
.chatdlm-icon-button-active,
.chatdlm-icon-button-active:hover {
    color: #4285F4;
    color: var(--chatdlm-brand);
}

/* 暂时不能点(浏览器没有可后退的页面等)：图标退到更弱一档的字色，悬停不出方块 */
.chatdlm-icon-button-disabled,
.chatdlm-icon-button-disabled:hover {
    color: #ADB5BD;
    color: var(--chatdlm-text-tertiary);
    background-color: transparent;
    cursor: default;
}

/* 导航栏的图标按钮：方块更大，图标 28px */
.chatdlm-icon-button-nav {
    width: 36px;
    width: var(--chatdlm-nav-button-size);
    height: 36px;
    height: var(--chatdlm-nav-button-size);
}

/* 选中态：Lucide 线框图标填成实心主色(照微信导航选中为实心)；内部线条改用导航底色描出，罗盘、信封这类带外框的填实后仍看得出形状 */
.chatdlm-theme-icon-selected {
    fill: currentColor;
    color: #4285F4;
    color: var(--chatdlm-brand);
}

/* 只有标了 chatdlm-icon-inner 的内部线条(罗盘指针、立方体棱线、信封的 V)用导航底色描；外轮廓仍是主色描边，所以选中和静止一样大 */
.chatdlm-theme-icon-selected .chatdlm-icon-inner {
    stroke: #DFDFDF;
    stroke: var(--chatdlm-navigation-background);
    paint-order: stroke;
}

/* 主题色三选一(蓝默认)：黄底上白字看不清，黄色时主色上的字改用近黑 */
body[theme-color=green] {
    --chatdlm-brand: #34A853;
}

body[theme-color=yellow] {
    --chatdlm-brand: #FBBC05;
    --chatdlm-on-brand: #202123;
    --chatdlm-on-brand-secondary: rgba(32,33,35,.7);
}

/* 头像形状：圆形时全站头像(导航、会话列表、聊天、通讯录、群信息、个人资料、助理……)一起变圆 */
body[avatar-shape=round] {
    --chatdlm-avatar-radius: 50%;
}

/* 字体大小三档 */
body[font-size=small] {
    --chatdlm-font-scale: 0.88;
}

/* 大档(2026-11-08 用户定：小、中不动，大档照微信调大后的样子)：同一块屏幕上微信调大后与 ChatDLM 并排截图实测，截图像素 ÷ 1.5。
   微信调大不只放大字，头像、行高、搜索行、头部、导航、图标一起放大，所以这里整组换；没变的(气泡内边距、小三角、左右边距、列表宽)不动 */
body[font-size=large] {
    --chatdlm-font-scale: 2;                         /* 气泡字：每字 42 像素 → 28px；会话里的时间跟着 → 26px(数字高 28 像素) */
    --chatdlm-message-name-font-size: 16px;          /* 群聊名字：这次没截到群聊，先按列表摘要的放大比例(12 → 16)，见到群聊再量 */
    --chatdlm-chat-avatar-size: 50px;                /* 聊天头像 75 像素 */
    --chatdlm-message-gap: 20px;                     /* 上一条气泡底到下一条顶 31 像素 */
    --chatdlm-chat-title-font-size: 19px;            /* 聊天头部标题每字 28.5 像素 */
    --wk-height-chat-search: 64px;                   /* 搜索行、聊天头部 96 像素 */
    --wk-height-chat-conversation-header: 64px;
    --chatdlm-search-box-height: 31px;               /* 搜索框 47 像素 */
    --chatdlm-search-add-size: 33px;                 /* 加号方块：照中档比输入框高 2px */
    --chatdlm-search-placeholder-font-size: 15px;    /* 「搜索」每字 23 像素 */
    --chatdlm-list-avatar-size: 50px;                /* 会话列表头像 75 像素 */
    --chatdlm-list-row-height: 80px;                 /* 会话行 120 像素 */
    --chatdlm-list-name-font-size: 19px;             /* 名字每字 28.8 像素 */
    --chatdlm-list-name-line-height: 28px;           /* 名字顶到摘要顶 43 像素 */
    --chatdlm-list-preview-font-size: 16px;          /* 摘要每字 23.8 像素 */
    --chatdlm-list-preview-line-height: 24px;
    --chatdlm-list-time-font-size: 15px;             /* 时间数字高 16 像素(中档 11 像素 → 10px) */
    --chatdlm-nav-button-size: 42px;                 /* 导航头像 64 像素；图标中心间距 81 像素 = 42 + 12 */
}

/* 大档的图标：组件里写的是中档尺寸，这里按实测放大(图标 SVG 的宽高由样式覆盖) */
body[font-size=large] .chatdlm-search-box .chatdlm-theme-icon {
    width: 18px;                                     /* 搜索框放大镜 20 像素(中档 16) */
    height: 18px;
}

body[font-size=large] .wk-chat-search-add .chatdlm-theme-icon,
body[font-size=large] .wk-chat-conversation-header-right .chatdlm-theme-icon {
    width: 24px;                                     /* 加号圆 30 像素、头部电话 30 像素(中档 18、20) */
    height: 24px;
}

body[font-size=large] .chatdlm-icon-button-nav .chatdlm-theme-icon {
    width: 28px;                                     /* 导航图标 35 像素(中档 22) */
    height: 28px;
}

/* ChatDLM 站标(通搜匿名头像)：全项目唯一一份。照通搜 sitemenu.css 的做法：SVG 直接写在样式里(data: 地址)、mask 只取形状，
   颜色由用的地方的 background-color 定，大小由用的地方定。源文件 assets/icons/chatdlm-logo.svg。
   用的地方：登录页站标(.chatdlm-login-logo，主色)、聊天右栏空白处(.wk-chat-empty-logo，灰) */
.chatdlm-logo-mark {
    --chatdlm-logo: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%201025%201024%27%3E%3Cpath%20d=%27M965%20593.18c-42.54-274.74-126.48-541.14-405.66-541.14-511.56-0.060-527.34%20825.24-527.34%20825.24h189.3c0%200%20137.46%2094.74%20229.86%2094.74s67.62-94.74%2067.62-94.74h94.62c0%200-6.78%2094.74%2067.56%2094.74%20108.18%200%20216.3-78.9%20229.86-94.74%2013.56-15.78%2081.18%200%2081.18%200s1.020-102.9-27-284.1zM614.72%20740.42c-233.16%200-256.86-136.26-256.86-304.38s115.020-304.44%20256.86-304.44c165.54%200%20256.86%20136.32%20256.86%20304.44%200%20168.12-11.88%20304.38-256.86%20304.38z%27/%3E%3Cpath%20d=%27M451.88%20365.36c0%2037.345%2030.275%2067.62%2067.62%2067.62s67.62-30.275%2067.62-67.62c0-37.345-30.275-67.62-67.62-67.62-37.345%200-67.62%2030.275-67.62%2067.62%200%200%200%200%200%200z%27/%3E%3Cpath%20d=%27M614.18%20629.18c0%2018.689%2018.159%2033.84%2040.56%2033.84s40.56-15.151%2040.56-33.84c0-18.689-18.159-33.84-40.56-33.84-22.401%200-40.56%2015.151-40.56%2033.84z%27/%3E%3Cpath%20d=%27M695.3%20365.36c0%2037.345%2027.239%2067.62%2060.84%2067.62s60.84-30.275%2060.84-67.62c0-37.345-27.239-67.62-60.84-67.62-33.601%200-60.84%2030.275-60.84%2067.62z%27/%3E%3C/svg%3E");
    -webkit-mask: var(--chatdlm-logo) no-repeat center / contain;
    mask: var(--chatdlm-logo) no-repeat center / contain;
}

/* ===== 浮层不要阴影(2026-11-12 用户定：照微信，阴影难看，全部撤掉) =====
   浮层(弹出菜单、下拉、提示、轻提示)改成页面底 + 一条细线(--wk-line) + 圆角 6，跟鼠标提示(Hint)同一个样子；
   深色下底色和背景一样，没有那条线菜单就看不出边，所以线不能省。
   Semi 的深色主题把这几个变量盖在 body[theme-mode=dark] 上(盖掉了色板里的危险红：深色下未读数变成偏橙的红)，
   这里用 html body 抬高一档再盖回来。描边用的 box-shadow(选中圈、焦点圈)、在线小点的光不是阴影，不动 */
html body,
html body[theme-mode=dark] {
    --semi-shadow-elevated: none;
    --semi-color-danger: var(--chatdlm-danger);
}

.semi-popover-wrapper,
.semi-dropdown-wrapper,
.semi-toast-content,
.semi-notification-notice {
    background-color: #FFFFFF;
    background-color: var(--chatdlm-page-background);
    color: #202123;
    color: var(--chatdlm-text-primary);
    border: 1px solid #DFDFDF;
    border: var(--wk-line);
    border-radius: 6px;
    border-radius: var(--chatdlm-icon-button-radius);
    box-shadow: none;
}

/* 二维码：码点是主题色(--chatdlm-brand)，底永远白；中间站标是主题色圆角块 + 主色上的字色画的站标(形状来自 App.css 的 .chatdlm-logo-mark) */
.chatdlm-qrcode {
    position: relative;
    flex-shrink: 0;
    --chatdlm-qrcode-color: var(--chatdlm-brand);
}

/* 黄色太浅：白底上拍得糊一点就扫不出(实测)，码点往近黑里压一半，还是黄的色相 */
body[theme-color=yellow] .chatdlm-qrcode {
    --chatdlm-qrcode-color: color-mix(in srgb, var(--chatdlm-brand) 50%, var(--chatdlm-fixed-near-black));
}

.chatdlm-qrcode svg {
    display: block;
}

.chatdlm-qrcode-background {
    fill: var(--chatdlm-fixed-white);
}

.chatdlm-qrcode-modules {
    fill: var(--chatdlm-qrcode-color);
    stroke: var(--chatdlm-qrcode-color);
}

.chatdlm-qrcode-modules rect:not([fill="none"]) {
    stroke: none;
}

.chatdlm-qrcode-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 22%;
    background-color: var(--chatdlm-brand);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chatdlm-qrcode-logo-mark {
    width: 66%;
    height: 66%;
    background-color: var(--chatdlm-on-brand);
}


.wk-channelqrcode {
    width: 100%;
    height: 100%;
    padding: 15px;
}

.wk-channelqrcode-box {
    width: 100%;
    background-color: var(--wk-color-item);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-direction: column;
}

.wk-channelqrcode-info-avatar {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wk-channelqrcode-info-avatar img {
    width: 60px;
    height: 60px;
    border-radius: var(--chatdlm-avatar-radius);
}

.wk-channelqrcode-qrcode {
    width: 250px;
    height: 250px;
    display: flex;
    justify-content: center;
}

.wk-channelqrcode-expire {
    font-size: 12px;
    color: var(--chatdlm-text-secondary);
    text-align: center;
    padding: 20px 0px;
}

.wk-channelqrcode-info-name {
    text-align: center;
    color: var(--wk-text-item);;
}

.wk-channelqrcode-qrcode-box {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    margin-top: 20px;
}

.wk-channelqrcode-qrcode-mask {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: var(--chatdlm-page-background);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

}

body[theme-mode=dark] .wk-channelqrcode-qrcode-mask {
    background-color: var(--chatdlm-page-background);
}

.wk-channelqrcode-qrcode-mask p {
    font-size: 18px;
    margin-bottom: 0px;
    color: var(--chatdlm-text-secondary);
}

.wk-channelqrcode-qrcode-loading {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.wk-inputedit {
    width: 100%;
    height: 50px;
   
}

.wk-inputedit .semi-input-textarea-wrapper {
    background-color: var(--wk-color-item);
}

.wk-inputedit-placeholder {
    font-size: 13px;
    color: var(--chatdlm-text-tertiary);
    margin: 5px 0px 0px 5px;
}


.wk-subscribers {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.wk-subscribers-content {
    display: flex;
    flex-wrap: wrap;
    padding-left: 20px;
}

.wk-subscribers-item {
    width: 60px;
    height: 80px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
   
}

.wk-subscribers-item img {
    width: 50px;
    height: 50px;
    border-radius: 40%;
}

.wk-subscribers-item-name {
    font-size: 12px;
    color: var(--chatdlm-text-primary);
    text-overflow: ellipsis;
    width: 100%;
    height: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    margin-top: 5px;
    line-height: 12px;
}

body[theme-mode=dark] .wk-subscribers-item-name {
    color: var(--chatdlm-text-primary);
}

.wk-subscribers-more {
    font-size: 14px;
    margin-top: 10px;
    color: var(--wk-color-theme);
    cursor: pointer;
    text-align: center;
}




.wk-conversationselect {
    max-height: 600px;
    overflow: hidden;
}

.wk-conversationselect-content {
    display: flex;
    padding: 10px 10px 10px 0px;
    cursor: pointer;
    align-items: center;
}

.wk-conversationselect-content-title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    width: 100%;
    background: var(--wk-color-secondary);
    font-weight: bold;
    font-size: 17px;
}

.wk-conversationselect-content-searchBox {
    display: flex;
    align-items: center;
    width: 100%;
    height: 57px;
    padding-left: 20px;
    flex-wrap: wrap;
    overflow: auto;
    max-height: 400px;
}

.wk-conversationselect-content-selectedChannel {
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
}

.wk-conversationselect-content-selectedAvatar {
    padding: 2px;
    cursor: pointer;
}


.wk-conversationselect-content-searchContent {
    display: flex;
    min-width: 200px;
    height: 50px;
}

.wk-conversationselect-content-searchContent input {
    flex: 1 1;
    height: 32px;
    font-size: 12px;
    line-height: 18px;
    background-color: transparent;
    color: var(--chatdlm-text-primary);
    padding: 0;
    outline: none;
    border: none;
    height: 100%;
}

.wk-conversationselect-content-searchIcon {
    display: flex;
    align-items: center;
}

.wk-conversationselect-content-searchInput {
    margin-left: 10px;
    max-width: 100px;
}

.wk-conversationselect-content-box {
    padding: 0px 20px;
    max-height: 400px;
    overflow: auto;
}


.wk-conversationselect-content-header {
    background: var(--wk-color-secondary);
    font-weight: 400;
    font-size: 13px;
    padding: 0 18px;
    line-height: 25px;
}

.wk-conversationselect-content-list {

}

.wk-conversationselect-content-box-data {
    display: flex;
    margin-left: 10px;
}

.wk-conversationselect-content-box-name {
    margin-left: 10px;
    display: flex;
    align-items: center;
}


.wk-conversationselect-footer {
    background: var(--wk-color-secondary);
    height: 100px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wk-conversationselect-okBtn {
    cursor: pointer;
    width: 160px;
    border-radius: 8px;
    height: 40px;
    background-color: var(--wk-color-theme);
    color: var(--chatdlm-on-brand);
    display: flex;
    justify-content: center;
    align-items: center;
}



.wk-userinfo {
    background-color: var(--wk-color-secondary);
    position: relative;
    --wk-height-userInfo-footer: 60px;
    --wk-height-userInfo-nav: 44px;
    width: 100%;
    height: 100%;
}


.wk-userInfo-footer {
    width: 100%;
    height: var(--wk-height-userInfo-footer);
    background-color: var(--chatdlm-page-background);
    position: absolute;
    bottom: 0px;
}

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

.wk-userinfo-user {
    display: flex;
}

.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: 15px;
}

.wk-userinfo-user-avatar {
    margin-left: 20px;
    border-radius: var(--chatdlm-avatar-radius);
    background-color: var(--wk-color-item);
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wk-userinfo-user-avatar  img{
    width: 50px;
    height: 50px;
    border-radius: var(--chatdlm-avatar-radius);
}

.wk-userinfo-user-info-name {
    font-size: 16px;
    color: var(--wk-text-item);
}

.wk-userinfo-user-info-others  ul {
    margin-bottom: 0px;
    margin-top: 2px;
}

.wk-userinfo-user-info-others li {
    color: var(--wk-color-font-tip);
}

.wk-userinfo-footer-sendbutton {
    width: 100%;
    height: 100%;
    padding: 10px 15px 15px 15px;
}

.wk-userinfo-footer-sendbutton button {
    width: 100%;
    height: 40px;
}


.wk-userinfo-sections{
    margin-top: 20px;
}

.wk-userinfo-loading {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}
/* ===== 用户卡片照微信(1.5 倍截图实测：卡 391 宽、内边距 24、头像 84 圆角方、名字 20、小字 15、分组标题/标签/值 16、标签列宽 93) ===== */
.chatdlm-usercard {
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    padding: 24px 24px 16px;
    background-color: var(--chatdlm-page-background);
    color: var(--chatdlm-text-primary);
    position: relative;
}

.chatdlm-usercard-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: var(--wk-line);
    position: relative;
}

.chatdlm-usercard-avatar {
    width: 84px;
    height: 84px;
    border-radius: var(--chatdlm-avatar-radius);
    flex-shrink: 0;
    background-color: var(--chatdlm-layer-static);
}

.chatdlm-usercard-head-text {
    flex: 1 1;
    min-width: 0;
    padding-right: 40px;
}

.chatdlm-usercard-name {
    font-size: 20px;
    line-height: 28px;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chatdlm-usercard-line {
    margin-top: 6px;
    font-size: 15px;
    color: var(--chatdlm-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chatdlm-usercard-more {
    position: absolute;
    top: 0;
    right: 0;
}

.chatdlm-usercard-group {
    padding: 16px 0;
    border-bottom: var(--wk-line);
}

.chatdlm-usercard-group-title {
    font-size: 16px;
    color: var(--chatdlm-text-secondary);
    margin-bottom: 10px;
}

.chatdlm-usercard-row {
    display: flex;
    align-items: baseline;
    font-size: 16px;
    line-height: 24px;
    padding: 4px 0;
    border-radius: var(--chatdlm-icon-button-radius);
}

.chatdlm-usercard-row-clickable {
    cursor: pointer;
}

.chatdlm-usercard-row-clickable:hover {
    background-color: var(--chatdlm-layer-hover);
}

.chatdlm-usercard-row-label {
    width: 93px;
    flex-shrink: 0;
    color: var(--chatdlm-text-secondary);
}

.chatdlm-usercard-row-value {
    flex: 1 1;
    min-width: 0;
    color: var(--chatdlm-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 底部动作：图标在上字在下，悬停圆角方块(照微信) */
.chatdlm-usercard-actions {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding-top: 20px;
}

.chatdlm-usercard-action {
    width: 100px;
    height: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: var(--chatdlm-icon-button-radius);
    color: var(--chatdlm-text-secondary);
    font-size: 15px;
    cursor: pointer;
}

.chatdlm-usercard-action:hover {
    background-color: var(--chatdlm-layer-hover);
    color: var(--chatdlm-text-primary);
}

/* 「…」菜单：实底(不透明)、行 16 字 */
.chatdlm-usercard-menu.semi-dropdown-menu {
    background-color: var(--chatdlm-layer-static);
    border: 1px solid var(--chatdlm-layer-line);
    padding: 6px 0;
}

.chatdlm-usercard-menu .semi-dropdown-item {
    font-size: 16px;
    color: var(--chatdlm-text-primary);
    padding: 8px 20px;
}

.chatdlm-usercard-menu .semi-dropdown-item:hover {
    background-color: var(--chatdlm-layer-hover);
}

.chatdlm-usercard-menu .semi-dropdown-item-danger {
    color: var(--chatdlm-danger);
}


.wk-friendapply {
    width: 100%;
    height: 100%;
    background-color: var(--chatdlm-page-background);
}

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

.wk-friendapply-content {
    padding: 15px;
}

.wk-friendapply-content-tip {
    color: var(--chatdlm-text-secondary);
}

.wk-friendapply-content-message {
    margin-top: 5px;
}
.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-modal-userinfo .semi-modal-body {
  height: 480px; /* RoutePage 内部是绝对定位，容器必须有定高，否则内容高 0 被裁掉 */
  padding: 0;
  background-color: var(--chatdlm-page-background);
  border-radius: var(--chatdlm-bubble-radius);
  overflow: hidden;
}

/* 加入组织 */
.wk-base-modal-join-org .semi-modal-content {
  border: none !important;
  padding: 12px !important;
}
.wk-base-modal-join-org .semi-modal-header {
  margin: 12px !important;
}
.wk-base-modal-join-org .semi-modal-body-wrapper {
  margin: 0px;
}
.wk-base-modal-join-org .semi-modal-body {
  height: 420px;
}

.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;
}



.wk-subscrierlist {
    background-color: var(--chatdlm-page-background);
    width: 100%;
    height: 100%;
    overflow: scroll;
}

.wk-subscrierlist-list-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
}

.wk-subscrierlist-item-name {
    margin-left: 1rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 10rem;
}

.wk-subscrierlist-item-content {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.wk-subscrierlist-item-desc {
    font-size: 14px;
    color: var(--chatdlm-text-secondary);
}

.wk-indextable {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.wk-indextable-section-title {
    background-color: var(--wk-color-secondary);
    margin-left: 15px;
}

.wk-indextable-item {
    display: flex;
    align-items: center;
    padding: 15px 15px 15px 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: 50px;
    height: 50px;
    border-radius: var(--chatdlm-avatar-radius);
}

.wk-indextable-item-name {
    margin-left: 15px;
}

body[theme-mode=dark]  .wk-indextable-item-name {
    color: var(--chatdlm-text-primary);
}

.wk-indextable-search {
    padding: 10px 0px;
    display: flex;
    overflow: hidden;
    width: 100%;
    background-color: var(--chatdlm-layer-static);
    z-index: 10;
}

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

.wk-indextable-item-index {
    width: 50px;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
}

body[theme-mode=dark] .wk-indextable-item-index {
    color: var(--chatdlm-text-primary);
}

.wk-indextable-checkbox {
    margin-right: 10px;
}

.wk-indextable-search-box {
    display: flex;
    min-width: 100px;
    height: 50px;
    background-color: var(--chatdlm-layer-static);
}

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: 20px;
}

.wk-indextable-search-input {
    margin-left: -20px;
    max-width: 100px;
}

.wk-indextable-search-input input {
    flex: 1 1;
    height: 32px;
    font-size: 12px;
    line-height: 18px;
    background-color: transparent;
    color: var(--chatdlm-text-primary);
    outline: none;
    border: none;
    height: 100%;
    padding-left: 25px;
}

body[theme-mode=dark] .wk-indextable-search-input input {
    color: var(--chatdlm-text-primary);
}

.wk-indextable-select-user {
    padding: 0px 5px;
    cursor: pointer;
}

.wk-indextable-search .wk-indextable-select-user img{
    border-radius: 50%;
}

.wk-indextable-contacts {
    width: 100%;
    height: calc(100% - 70px);
    overflow-y: auto;
}

.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-message-card {
    background-color: var(--chatdlm-page-background);
    width: 300px;
    cursor: pointer;
    border-radius: 8px;
}

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


.wk-message-card-content {
    display: flex;
    padding: 10px;
    align-items: center;
}

.wk-message-card-content-name {
    margin-left: 20px;
    color: var(--wk-text-item);

}

.wk-message-card-bottom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 10px 5px 10px;
} 

.wk-message-card-bottom-flag {
    font-size: 12px;
    color: var(--chatdlm-text-tertiary);
}

.wk-message-card-bottom-time {
    position: absolute;
    right: 10px;
    top: -5px;
    color: var(--chatdlm-text-tertiary) !important;
}
.wk-join-oraganization {
  background-color: var(--chatdlm-page-background);
  cursor: pointer;
  border-radius: 8px;
  width: 100%;
}

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


.wk-join-oraganization-content {
  display: flex;
  padding: 10px;
  align-items: center;
}

.wk-join-oraganization-content-name {
  margin-left: 20px;
  color: var(--wk-text-item);
}

.wk-join-oraganization-bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 10px 5px 10px;
}

.wk-join-oraganization-bottom-flag {
  font-size: 12px;
  color: var(--chatdlm-text-tertiary);
}

.wk-join-oraganization-bottom-time {
  position: absolute;
  right: 10px;
  top: -5px;
  color: var(--chatdlm-text-tertiary) !important;
}

.wk-message-system {
    padding: 10px 20px;
    width: 85%;
    margin: 0 auto;
    text-align: center;
    margin-top: 15px;
    font-size: 12px;
    color: var(--chatdlm-text-tertiary);
    white-space:  pre-line;
}
body[theme-mode=dark] .wk-message-system  {
    color: var(--chatdlm-text-tertiary);
}
@font-face{font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(../../static/media/KaTeX_AMS-Regular.73ea273a72f4aca30ca5.woff2) format("woff2"),url(../../static/media/KaTeX_AMS-Regular.d562e886c52f12660a41.woff) format("woff"),url(../../static/media/KaTeX_AMS-Regular.853be92419a6c3766b9a.ttf) format("truetype")}@font-face{font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(../../static/media/KaTeX_Caligraphic-Bold.a1abf90dfd72792a577a.woff2) format("woff2"),url(../../static/media/KaTeX_Caligraphic-Bold.d757c535a2e5902f1325.woff) format("woff"),url(../../static/media/KaTeX_Caligraphic-Bold.7489a2fbfb9bfe704420.ttf) format("truetype")}@font-face{font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(../../static/media/KaTeX_Caligraphic-Regular.d6484fce1ef428d5bd94.woff2) format("woff2"),url(../../static/media/KaTeX_Caligraphic-Regular.db074fa22cf224af93d7.woff) format("woff"),url(../../static/media/KaTeX_Caligraphic-Regular.7e873d3833eb108a0758.ttf) format("truetype")}@font-face{font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(../../static/media/KaTeX_Fraktur-Bold.931d67ea207ab37ee693.woff2) format("woff2"),url(../../static/media/KaTeX_Fraktur-Bold.354501bac435c3264834.woff) format("woff"),url(../../static/media/KaTeX_Fraktur-Bold.4c761b3711973ab04edf.ttf) format("truetype")}@font-face{font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(../../static/media/KaTeX_Fraktur-Regular.172d3529b26f8cedef6b.woff2) format("woff2"),url(../../static/media/KaTeX_Fraktur-Regular.6fdf0ac577be0ba82a4c.woff) format("woff"),url(../../static/media/KaTeX_Fraktur-Regular.ed305b5434865e06ffde.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(../../static/media/KaTeX_Main-Bold.39890742bc957b368704.woff2) format("woff2"),url(../../static/media/KaTeX_Main-Bold.0c3b8929d377c0e9b2f3.woff) format("woff"),url(../../static/media/KaTeX_Main-Bold.8169508bf58f8bd92ad8.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(../../static/media/KaTeX_Main-BoldItalic.20f389c4120be058d80a.woff2) format("woff2"),url(../../static/media/KaTeX_Main-BoldItalic.428978dc7837d46de091.woff) format("woff"),url(../../static/media/KaTeX_Main-BoldItalic.828abcb200061cffbaae.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(../../static/media/KaTeX_Main-Italic.fe2176f79edaa716e621.woff2) format("woff2"),url(../../static/media/KaTeX_Main-Italic.fd947498bc16392e76c2.woff) format("woff"),url(../../static/media/KaTeX_Main-Italic.fa675e5e4bec9eb250b6.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(../../static/media/KaTeX_Main-Regular.f650f111a3b890d116f1.woff2) format("woff2"),url(../../static/media/KaTeX_Main-Regular.4f35fbcc9ee8614c2bcc.woff) format("woff"),url(../../static/media/KaTeX_Main-Regular.9eba1d77abcf2aa6e94e.ttf) format("truetype")}@font-face{font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(../../static/media/KaTeX_Math-BoldItalic.dcbcbd93bac0470b462d.woff2) format("woff2"),url(../../static/media/KaTeX_Math-BoldItalic.3f07ed67f06c720120ce.woff) format("woff"),url(../../static/media/KaTeX_Math-BoldItalic.bf2d440b3a42ea78a998.ttf) format("truetype")}@font-face{font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(../../static/media/KaTeX_Math-Italic.6d3d25f4820d0da8f01f.woff2) format("woff2"),url(../../static/media/KaTeX_Math-Italic.96759856b4e70f3a8338.woff) format("woff"),url(../../static/media/KaTeX_Math-Italic.8a5f936332e8028c7278.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(../../static/media/KaTeX_SansSerif-Bold.95591a929f0d32aa282a.woff2) format("woff2"),url(../../static/media/KaTeX_SansSerif-Bold.b9cd458ac6d5889ff9c3.woff) format("woff"),url(../../static/media/KaTeX_SansSerif-Bold.5b49f4993ae22d7975b4.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(../../static/media/KaTeX_SansSerif-Italic.7d393d382f3e7fb1c637.woff2) format("woff2"),url(../../static/media/KaTeX_SansSerif-Italic.8d593cfaa96238d5e2f8.woff) format("woff"),url(../../static/media/KaTeX_SansSerif-Italic.b257a18c016f37ee4543.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(../../static/media/KaTeX_SansSerif-Regular.cd5e231e0cc53b2cb2c0.woff2) format("woff2"),url(../../static/media/KaTeX_SansSerif-Regular.02271ec5cb9f5b4588ac.woff) format("woff"),url(../../static/media/KaTeX_SansSerif-Regular.2f7bc363fc5424ebda59.ttf) format("truetype")}@font-face{font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(../../static/media/KaTeX_Script-Regular.c81d1b2a4b75d3eded60.woff2) format("woff2"),url(../../static/media/KaTeX_Script-Regular.073b3402d036714b4370.woff) format("woff"),url(../../static/media/KaTeX_Script-Regular.fc9ba5249878cd8f8d88.ttf) format("truetype")}@font-face{font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(../../static/media/KaTeX_Size1-Regular.6eec866c69313624be60.woff2) format("woff2"),url(../../static/media/KaTeX_Size1-Regular.0108e89c9003e8c14ea3.woff) format("woff"),url(../../static/media/KaTeX_Size1-Regular.6de7d4b539221a49e9e2.ttf) format("truetype")}@font-face{font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(../../static/media/KaTeX_Size2-Regular.2960900c4f271311eb36.woff2) format("woff2"),url(../../static/media/KaTeX_Size2-Regular.3a99e70aee4076660d38.woff) format("woff"),url(../../static/media/KaTeX_Size2-Regular.57f5c1837853986ea1db.ttf) format("truetype")}@font-face{font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(../../static/media/KaTeX_Size3-Regular.e1951519f6f0596f7356.woff2) format("woff2"),url(../../static/media/KaTeX_Size3-Regular.7947224e8a9914fa332b.woff) format("woff"),url(../../static/media/KaTeX_Size3-Regular.8d6b6822586eea3d3b20.ttf) format("truetype")}@font-face{font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(../../static/media/KaTeX_Size4-Regular.e418bf257af1052628d8.woff2) format("woff2"),url(../../static/media/KaTeX_Size4-Regular.aeffd8025cba3647f1a6.woff) format("woff"),url(../../static/media/KaTeX_Size4-Regular.4ad7c7e8bb8d10a34bb7.ttf) format("truetype")}@font-face{font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(../../static/media/KaTeX_Typewriter-Regular.c295e7f71970f03c0549.woff2) format("woff2"),url(../../static/media/KaTeX_Typewriter-Regular.4c6b94fd1d07f8beff7c.woff) format("woff"),url(../../static/media/KaTeX_Typewriter-Regular.c5c02d763c89380dcb4e.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.16.11"}.katex .katex-mathml{clip:rect(1px,1px,1px,1px);border:0;height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-moz-min-content;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}

/* Markdown 内容的样式(2026-11-08)：照抄通搜百科词条正文 .baike-body(baike.tongsou.com/static/entry.css)的间距和层级。
   换算：百科正文字号 .95rem，里面的 rem 都按「÷ .95」换成 em，这样跟着气泡字号(--chatdlm-message-font-size)一起缩放；行高沿用气泡原来的。
   颜色不用百科的色号，换成 ChatDLM 色板里对应的变量(夜间模式跟着变)：
     百科的灰底 rgba(128,128,128,.10～.15) → --chatdlm-overlay-hover(半透明灰，叠在收、发两种气泡上都看得见)
     百科的灰线 rgba(128,128,128,.3)       → --chatdlm-layer-line
     百科的次级字 #6c757d / 夜间 #adb5bd   → --chatdlm-text-secondary
   宽东西(表格、代码块、公式、图表)在自己的块里横向滚动，不撑破气泡。 */
.chatdlm-markdown {
    align-self: stretch;
    min-width: 0;
    max-width: 100%;
    word-break: break-word;
    line-height: 1.3125;
    text-align: left;
    text-align: initial;
    display: flow-root;
}

.chatdlm-markdown > :first-child { margin-top: 0; }
.chatdlm-markdown > :last-child { margin-bottom: 0; }

.chatdlm-markdown p { margin: 0 0 .95em; }

/* 标题：百科 h2 1.15rem 左边一道 3px 线、h3 1.02rem；h1 跟 h2 一档，h4～h6 跟 h3 一档(只用这两档) */
.chatdlm-markdown h1,
.chatdlm-markdown h2 {
    font-size: 1.21em;
    font-weight: 600;
    margin: 1.68em 0 .74em;
    padding-left: .63em;
    border-left: 3px solid var(--chatdlm-text-secondary);
}
.chatdlm-markdown h3,
.chatdlm-markdown h4,
.chatdlm-markdown h5,
.chatdlm-markdown h6 {
    font-size: 1.07em;
    font-weight: 600;
    margin: 1.26em 0 .53em;
}

/* 全局把列表符号清掉了，这里按百科(浏览器默认的实心圆点、数字)加回来 */
.chatdlm-markdown ul { list-style: disc; padding-left: 1.47em; margin: 0 0 .95em; }
.chatdlm-markdown ul ul { list-style: circle; }
.chatdlm-markdown ol { list-style: decimal; padding-left: 1.58em; margin: 0 0 .95em; }
.chatdlm-markdown li { margin-bottom: .42em; }
.chatdlm-markdown li > ul,
.chatdlm-markdown li > ol { margin: .42em 0 0; }
/* 任务列表 [ ] / [x]：markdown-it 原样输出成文字，不做勾选框 */

.chatdlm-markdown blockquote {
    border-left: 3px solid var(--chatdlm-layer-line);
    padding-left: .95em;
    margin: 1.05em 0;
    color: var(--chatdlm-text-secondary);
    display: flow-root;
}

.chatdlm-markdown hr {
    border: 0;
    border-top: 1px solid var(--chatdlm-layer-line);
    margin: 1.05em 0;
}

.chatdlm-markdown a {
    color: var(--chatdlm-brand);
    text-decoration: none;
}
.chatdlm-markdown a:hover { text-decoration: underline; }

/* 代码：百科行内代码 .85em、块 .85rem(÷.95 = .89em)；颜色不另起，用正文字色 */
.chatdlm-markdown code {
    background: var(--chatdlm-overlay-hover);
    padding: .1em .3em;
    border-radius: .2em;
    font-size: .85em;
}
.chatdlm-markdown pre {
    background: var(--chatdlm-overlay-hover);
    padding: .84em 1.05em;
    border-radius: .26em;
    font-size: .89em;
    overflow-x: auto;
    margin: 0 0 .95em;
    display: flow-root;
}
.chatdlm-markdown pre code {
    background: none;
    padding: 0;
    font-size: inherit;
}

/* 表格：百科 .88rem(÷.95 = .93em)、边框灰线、表头灰底加粗 */
.chatdlm-markdown-scroll {
    max-width: 100%;
    overflow-x: auto;
    margin: 1.26em 0;
}
.chatdlm-markdown table {
    border-collapse: collapse;
    font-size: .93em;
}
.chatdlm-markdown th,
.chatdlm-markdown td {
    border: 1px solid var(--chatdlm-layer-line);
    padding: .47em .74em;
    text-align: left;
    vertical-align: top;
}
.chatdlm-markdown th {
    background: var(--chatdlm-overlay-hover);
    font-weight: 600;
    white-space: nowrap;   /* 表头不折行(「关键产出」不再被挤成两行)，只让正文格子折行 */
}

.chatdlm-markdown img {
    max-width: 100%;
    height: auto;
    border-radius: .26em;
    display: block;
    margin: 1.05em 0;
}

/* 公式：独占一行的居中、太宽自己横向滚动(百科 .math-display 那条) */
.chatdlm-markdown .katex-display {
    margin: 1.37em 0;
    overflow-x: auto;
    overflow-y: hidden;
}
/* 块里的横向滚动条(表格、代码、公式、图表太宽时)：用项目滚动条那几个变量(细、圆头、同色)，平时不显示，鼠标移到这一块上才出现 */
.chatdlm-markdown-scroll,
.chatdlm-markdown pre,
.chatdlm-markdown .katex-display,
.chatdlm-markdown .chatdlm-markdown-mermaid {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.chatdlm-markdown-scroll:hover,
.chatdlm-markdown pre:hover,
.chatdlm-markdown .katex-display:hover,
.chatdlm-markdown .chatdlm-markdown-mermaid:hover {
    scrollbar-color: var(--chatdlm-scrollbar-thumb) transparent;
}
.chatdlm-markdown ::-webkit-scrollbar {
    width: var(--chatdlm-scrollbar-width);
    height: var(--chatdlm-scrollbar-width);
    background: transparent;
}
.chatdlm-markdown ::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: var(--chatdlm-scrollbar-width);
}
.chatdlm-markdown :hover::-webkit-scrollbar-thumb {
    background: var(--chatdlm-scrollbar-thumb);
}
.chatdlm-markdown ::-webkit-scrollbar-thumb:hover {
    background: var(--chatdlm-scrollbar-thumb-hover);
}

/* 公式写错时显示的源码 */
.chatdlm-markdown .chatdlm-markdown-source {
    white-space: pre-wrap;
}

/* 图表：画好以后居中、太宽自己横向滚动；没画好(或画不出来)显示的是源码代码块 */
.chatdlm-markdown .chatdlm-markdown-mermaid {
    margin: 0 0 .95em;
    overflow-x: auto;
}
.chatdlm-markdown .chatdlm-markdown-mermaid pre {
    margin: 0;
}
.chatdlm-markdown .chatdlm-markdown-mermaid[data-drawn="done"] {
    text-align: center;
}
.chatdlm-markdown .chatdlm-markdown-mermaid svg {
    max-width: 100%;
    height: auto;
}

.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: var(--chatdlm-emoji-font,) Helvetica; /* 表情用全站表情字体(App.css) */
}

.wk-message-text-richtext {
    
}

.wk-message-text-richmention {
    cursor: pointer;
    text-decoration: underline;
}

.wk-message-text-send {
    color: var(--chatdlm-on-brand);
}

.wk-message-text-recv {
    color: var(--chatdlm-text-primary);
}



/* 表情跟着字号走、放大一点：2026-11-12 起表情不再换成图片，是全站表情字体里的字(App.css)。
   字体里的表情图几乎铺满整个字高(约 1.05 个字高)，原来的 1.5 倍会伸出这一行，自己发的消息收起成 3 行时(overflow:hidden)上下被裁掉半张脸；
   改成 1.2 倍(图高 1.27em，小于一行的 1.3125em)，行高 1.09375(×1.2 = 1.3125em，正好一行)：带表情的气泡和纯文字一样高，不伸出去 */
.wk-message-text-richemoji {
    font-size: 1.2em;
    line-height: 1.09375;
    vertical-align: top;
}

.wk-message-text-reply {
    display: flex;
    color: var(--chatdlm-on-brand);
    opacity: .5;
    font-size: 14px;
    flex-direction: column;
    cursor: pointer;
}

.wk-message-text-reply.wk-message-text-reply-recv {
    color: var(--chatdlm-text-secondary);
    opacity: 1;
}


.wk-message-text-reply-author {
    display: flex;
    align-items: center;
}

.wk-message-text-reply-authoravatar {
    margin-right: 4px;
}

.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: 1.3125;
    text-align: left;
    text-align: initial;
    display: flow-root;
    unicode-bidi: plaintext;
}

/* 自己发的长消息收起时只显示 3 行(截法照回复引用那一行 .wk-message-text-reply-content，那里是 1 行) */
.wk-message-text-content.wk-message-text-collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 展开 / 收起的箭头：气泡里最下面靠右，用全站的图标按钮(悬停出圆角方块)，在气泡里收成 24px；
   颜色用主色上的次级字(白 70%)，移上去变主色上的字 */
.wk-message-text-toggle {
    display: flex;
    justify-content: flex-end;
    margin: 2px -5px -5px 0;
}

.wk-message-text-toggle .chatdlm-icon-button {
    width: 24px;
    height: 24px;
    color: var(--chatdlm-on-brand-secondary);
}

.wk-message-text-toggle .chatdlm-icon-button:hover {
    color: var(--chatdlm-on-brand);
}
.icon-play::before {
    content: "";
    color: var(--wk-color-theme);
    font-size: 20px;
}

.icon-pause::before {
    content: "";
    font-size: 20px;
    color: var(--wk-color-theme);
}

.voicePlay {
    width: 48px;
    height: 48px;
    background-color: var(--chatdlm-fixed-white);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    display: flex;
}

.wk-message-base-bubble-box.recv .voicePlay {
    background-color: var(--wk-color-secondary-2);
}

.voicePlay .icon-play {
    opacity: 1;
    transform: scale(1);
    transition: opacity .4s,transform .6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.voicePlay .icon-pause {
    opacity: 0;
    transform: scale(0.5);
}

.voicePlay i {
    position: absolute;
}

.voicePlaying .icon-pause {
    opacity: 1;
    transform: scale(1);
    transition: opacity .4s,transform .6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.voicePlaying .icon-play {
    opacity: 0;
    transform: scale(0.5);
}

.mediaLoading {
    position: absolute;
    cursor: pointer;
}

.voiceDownloading .icon-pause {
    opacity: 0;
    transform: scale(0.5);
}

.voiceDownloading .icon-play {
    opacity: 0;
    transform: scale(0.5);
}


.progressSpinner {
    width: auto;
    height: auto;
    background: transparent url(data:image/svg+xml;base64,PHN2ZyAgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIzMTkiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PHBhdGggZD0iTTU2Mi4yODExNzMgNTEwLjgwMDY4NWwyOTQuOTk2NjY0LTI5My40NjY4MjFjMTMuOTQ5NzEtMTMuODc4MDc5IDE0LjAyMDMxOC0zNi4zNjcyNzkgMC4xNDIyNC01MC4zMTY5ODktMTMuOTEzODk0LTEzLjk4NDUwMy0zNi4zNjcyNzktMTQuMDIwMzE4LTUwLjMxNjk4OS0wLjE0MjI0TDUxMi4wMzQ3OTIgNDYwLjM3NzI3MiAyMTkuNTI4ODU1IDE2Ni45ODIwODJjLTEzLjg0MjI2My0xMy44NzgwNzktMzYuMzY3Mjc5LTEzLjk0OTcxLTUwLjMxNjk4OS0wLjA3MTYzMS0xMy45MTM4OTQgMTMuODc4MDc5LTEzLjk0ODY4NyAzNi40MDMwOTUtMC4wNzE2MzEgNTAuMzUyODA1TDQ2MS41NzY1ODcgNTEwLjU4NzgzNyAxNjYuNzIxMTM5IDgwMy44NzY2MDRjLTEzLjk0OTcxIDEzLjg3ODA3OS0xNC4wMjAzMTggMzYuMzY3Mjc5LTAuMTQyMjQgNTAuMzE2OTg5IDYuOTM5MDM5IDYuOTc0ODU1IDE2LjA4NDMyNyAxMC40OTcwNzUgMjUuMjI5NjE0IDEwLjQ5NzA3NSA5LjA3MzY1NiAwIDE4LjE0ODMzNS0zLjQ1MTYxMiAyNS4wODczNzUtMTAuMzU0ODM1bDI5NC45MjYwNTYtMjkzLjM2MDM5OCAyOTUuMTc0NzIgMjk2LjA2NDk5NmM2LjkzOTAzOSA2Ljk3NDg1NSAxNi4wNDg1MTEgMTAuNDYyMjgzIDI1LjE5Mzc5OSAxMC40NjIyODMgOS4xMDk0NzIgMCAxOC4xODQxNTEtMy40ODc0MjggMjUuMTIzMTktMTAuMzkwNjUxIDEzLjkxMzg5NC0xMy44NzgwNzkgMTMuOTQ5NzEtMzYuMzY3Mjc5IDAuMDcxNjMxLTUwLjMxNjk4OUw1NjIuMjgxMTczIDUxMC44MDA2ODV6IiAgZmlsbD0iIzJmNzBmNSI+PC9wYXRoPjwvc3ZnPg==) no-repeat 49% 49%;
}

.progressSpinner svg {
    display: block;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    animation: 4s linear 0s infinite ProgressSpinnerAnimation;
}

.progressSpinner svg circle {
    transition: stroke-dashoffset .5s;
}

@keyframes ProgressSpinnerAnimation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
} 


.wk-message-voice {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.wk-message-voice-info {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}

.wk-message-voice-info-status {
    display: flex;
}

.wk-message-voice-info-time {
    display: flex;
    font-size: 14px;
}

.wk-message-voice-info-tail {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.wk-message-voice-waveform {
    position: relative;
    width: 100%;
    height: 100%;
}


.wk-message-voice-lightWavform {
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    transition: width 100ms ease-in-out;
    width: 0%;
}

.wk-message-video-content {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

.wk-message-video-content-time {
    align-items: center;
    background-color: var(--chatdlm-mask);
    border-radius: 12px;
    color: var(--chatdlm-fixed-white);
    display: flex;
    font-size: 12px;
    height: 1.125rem;
    left: 6px;
    line-height: 1;
    padding: 0 6px;
    position: absolute;
    top: 6px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    z-index: 2;
}

.wk-message-video-content-video img {
    border-radius: 4px;
    cursor: pointer;
}

.flexible-modal {
    position: absolute;
    z-index: 1;
    border: var(--wk-line);
    background: var(--chatdlm-page-background);
  }
  .flexible-modal-mask {
    position: fixed;
    height: 100%;
    background: var(--chatdlm-mask);
    top:0;
    left:0;
    right:0;
    bottom:0;
  }
  .flexible-modal-resizer {
    position:absolute;
    right:0;
    bottom:0;
    cursor:se-resize;
    margin:5px;
    border-bottom: solid 2px var(--chatdlm-text-secondary);
    border-right: solid 2px var(--chatdlm-text-secondary);
  }
  .flexible-modal-drag-area{
    background: var(--chatdlm-overlay-hover);
    height: 50px;
    position:absolute;
    right:0;
    top:0;
    cursor:move;
  }

.wk-message-location {
    cursor: pointer;
}

.wk-message-location-content {
    width: 250px;
    background-color: var(--chatdlm-page-background);
    border-radius: 4px;
}

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: 16px;
    padding: 5px 5px 0px 5px;
}

.wk-message-location-content-address {
    color: var(--chatdlm-text-secondary);
    font-size: 12px;
    padding: 0px 5px 5px 5px;
}

.wk-message-location-content-locationimg {
    width: 250px;
    height: 100px;
    overflow: hidden;
    background-size: cover;
}

/* 样式全部走 .chatdlm-icon-button(App.css) */
.wk-iconclick img {
    width: 20px;
    height: 20px;
}

/* 静止是框里放大镜的颜色(更弱一档字色)，鼠标移上去深一档(次级字色)；盖在输入框上面(助理页的输入框是铺满整个框的) */
.chatdlm-search-box-clear {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    color: var(--chatdlm-text-tertiary);
    cursor: pointer;
}

.chatdlm-search-box-clear:hover {
    color: var(--chatdlm-text-secondary);
}


.wk-emojitoolbar {
    position: relative;
}


.wk-emojitoolbar img {
    width: 20px;
    height: 20px;
}

.wk-emojitoolbar-emojipanel {
    /* 面板是绝对定位、挂在 32px 宽的表情钮上：不给定宽会按「可用宽度」收缩成一列(2026-11-07 截图里的 bug)，所以宽度写死 */
    /* 2026-11-12 照微信改：跟其他浮层一样页面底 + 细线 + 圆角 6、不要阴影；高度放到 420 */
    width: 460px;
    max-width: 460px;
    height: 420px;
    background-color: var(--chatdlm-page-background);
    position: absolute;
    left: 0;
    top: calc(-420px - 15px);
    border: var(--wk-line);
    border-radius: var(--chatdlm-icon-button-radius);
    overflow: hidden;
    cursor: default;
    transition: opacity .2s cubic-bezier(0.2, 0, 0.2, 1),transform .2s cubic-bezier(0.2, 0, 0.2, 1) !important;
    transform-origin: left bottom;
    visibility: hidden;
    z-index: 999;
}

.wk-emojitoolbar-emojipanel-show {
    animation: emojiPanelAnimationShow 0.25s;
    -webkit-animation: emojiPanelAnimationShow 0.25s; /* Safari 与 Chrome */
    visibility: visible;
}

.wk-emojitoolbar-emojipanel-hide {
    animation: emojiPanelAnimationHide 0.25s;
    -webkit-animation: emojiPanelAnimationHide 0.25s; /* Safari 与 Chrome */
    visibility: visible;
}

@keyframes emojiPanelAnimationShow {
    from {
        transform: scale(0.5);
    }
    to {
        transform: scale(1);
    }
}

@keyframes emojiPanelAnimationHide {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(0);
    }
}

.wk-emojipanel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 中间能滚的那块(FloatingScrollbar 包着)：占满搜索框和底栏之间 */
.wk-emojipanel > .chatdlm-scroll-area {
    flex: 1 1;
    min-height: 0;
}

.wk-emojipanel-content {
    height: 100%;
    overflow-y: auto;
    padding: 8px 16px 12px;
    box-sizing: border-box;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.wk-emojipanel-search {
    padding: 16px 16px 4px;
    flex-shrink: 0;
}

/* 面板是页面底：搜索框照「发现」页白底上的搜索框，用静底色(.chatdlm-kuaisou-search 同一个做法) */
.wk-emojipanel-search .chatdlm-search-box {
    background-color: var(--chatdlm-layer-static);
}

.wk-emojipanel-title {
    padding: 8px 4px;
    font-size: 13px;
    color: var(--chatdlm-text-tertiary);
}

.wk-emojipanel-empty {
    padding: 32px 0;
    text-align: center;
    font-size: 14px;
    color: var(--chatdlm-text-tertiary);
}

/* 表情：一行 10 个，图 28px，悬停出圆角方块(跟图标按钮同一个悬停色) */
.wk-emojipanel-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wk-emojipanel-grid li {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--chatdlm-icon-button-radius);
    cursor: pointer;
}

.wk-emojipanel-grid li:hover {
    background-color: var(--chatdlm-overlay-hover);
}

.wk-emojipanel-emoji {
    font-size: 28px;
    line-height: 1;
}

/* 收藏的表情：一行 5 个方格，图按比例放进去；第一格是「+」 */
.wk-emojipanel-stickers {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 8px;
    gap: 8px;
    margin: 0;
    padding: 8px 0 0;
    list-style: none;
}

.wk-emojipanel-stickers li {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    box-sizing: border-box;
    border-radius: var(--chatdlm-icon-button-radius);
    cursor: pointer;
}

.wk-emojipanel-stickers li:hover {
    background-color: var(--chatdlm-overlay-hover);
}

.wk-emojitoolbar .wk-emojipanel-stickers img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    display: block;
}

.wk-emojipanel-stickers .wk-emojipanel-sticker-add {
    background-color: var(--chatdlm-layer-static);
    color: var(--chatdlm-text-secondary);
}

.wk-emojipanel-stickers .wk-emojipanel-sticker-add:hover {
    background-color: var(--chatdlm-layer-hover);
    color: var(--chatdlm-text-primary);
}

.wk-emojipanel-sticker-add-busy .chatdlm-theme-icon {
    animation: emojiStickerAdding 1s linear infinite;
}

@keyframes emojiStickerAdding {
    to {
        transform: rotate(360deg);
    }
}

/* 底栏：搜索 / 表情 / 收藏的表情，图标按钮全站那一套；删除确认也出在这一条 */
.wk-emojipanel-tab {
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-top: var(--wk-line);
}

.wk-emojitoolbar-mask {
    position: fixed;
    width: 100%;
    height: 100%;
    top:0px;
    left: 0px;
    z-index: 998;
    cursor: default;
}

/* 图标三层：静止次级字色 / 悬停正文字色 */
.wk-emojitoolbar {
    color: var(--chatdlm-text-secondary);
    display: flex;
    align-items: center;
}

.wk-emojitoolbar:hover {
    color: var(--chatdlm-text-primary);
}

/* 收藏的卡片、多选的一条(Components/FavoriteCard)：收藏页、发送收藏的弹窗共用；原样从收藏页挪过来(2026-11-11)，没改一个值 */
/* 卡片：灰底圆角、内边距 16、间距 10；标题 17、预览 15 次级色、页脚 14 */
.chatdlm-favorites-card {
    padding: 16px;
    margin-bottom: 10px;
    border-radius: var(--chatdlm-bubble-radius);
    background-color: var(--chatdlm-layer-static);
}

.chatdlm-favorites-card:hover {
    background-color: var(--chatdlm-layer-hover);
}

/* 第三层：正在第三栏里写的那篇(照会话列表三层：静止、悬停、选中) */
.chatdlm-favorites-card-selected,
.chatdlm-favorites-card-selected:hover {
    background-color: var(--chatdlm-layer-selected);
}

.chatdlm-favorites-card-title {
    font-size: 17px;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chatdlm-favorites-card-line {
    margin-top: 4px;
    font-size: 15px;
    line-height: 22px;
    color: var(--chatdlm-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chatdlm-favorites-card-image {
    display: block;
    max-width: 240px;
    max-height: 160px;
    border-radius: var(--chatdlm-icon-button-radius);
    -o-object-fit: cover;
       object-fit: cover;
}

.chatdlm-favorites-card-footer {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--chatdlm-text-secondary);
}

.chatdlm-favorites-card-source {
    flex: 1 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chatdlm-favorites-card-date {
    flex-shrink: 0;
    margin-left: 12px;
}

/* 删除：平时不显示，悬停卡片才出现(红字)；点了先出「不可撤销」确认，再点红字才真删 */
.chatdlm-favorites-card-delete {
    color: var(--chatdlm-danger);
}

.chatdlm-favorites-card-delete {
    visibility: hidden;
}

.chatdlm-favorites-card:hover .chatdlm-favorites-card-delete {
    visibility: visible;
}

.chatdlm-favorites-card-openable {
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

/* 多选的一条：左边圆圈(照微信多选)，右边就是原来那张卡片；点哪里都是勾 */
.chatdlm-favorites-pick {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
}

.chatdlm-favorites-pick-check {
    flex-shrink: 0;
    margin-bottom: 10px; /* 跟卡片的下间距对齐，圆圈落在卡片正中 */
}

.chatdlm-favorites-pick-card {
    flex: 1 1;
    min-width: 0;
}

/* 多选时卡片上的「删除」不出(这时点卡片是勾选，删除走底下操作栏那一个) */
.chatdlm-favorites-pick .chatdlm-favorites-card:hover .chatdlm-favorites-card-delete {
    visibility: hidden;
}

/* 发送收藏的弹窗(照微信「发送收藏给 xxx」)：外框借全站弹窗 .wk-base-modal(没有边、没有右上角 ×)，里面左右两栏、定高 560。
   左栏就是收藏页的左栏(.chatdlm-favorites：底色、右边线、搜索行、分类行全是那一套)，右栏标题 + 卡片(FavoriteCard) + 底下两个按钮(设置里的按钮)。
   颜色、字号全是现有的变量和数值，不新增 */
.chatdlm-favorites-send-modal .semi-modal-body {
    height: 560px;
    padding: 0;
    background-color: var(--chatdlm-page-background);
    border-radius: var(--chatdlm-bubble-radius);
    overflow: hidden;
}

.chatdlm-favorites-send {
    display: flex;
    height: 100%;
}

/* 收藏页左栏那个 .chatdlm-favorites 是 width: 100%，这里写两层压过它 */
.chatdlm-favorites-send .chatdlm-favorites-send-side {
    width: 220px;
    flex-shrink: 0;
}

/* 弹窗里不能拖窗口：收藏页的搜索行是拖窗口的地方，这里关掉 */
.chatdlm-favorites-send .chatdlm-favorites-search {
    -webkit-app-region: no-drag;
}

.chatdlm-favorites-send-main {
    flex: 1 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    color: var(--chatdlm-text-primary);
}

/* 标题：跟会话头部标题同一个字号 */
.chatdlm-favorites-send-title {
    flex-shrink: 0;
    padding: 18px 24px 12px;
    font-size: var(--chatdlm-chat-title-font-size);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 卡片列表自己滚(悬浮滚动条照用法要求子元素自带 overflow-y)，跟收藏页的卡片区一样 */
.chatdlm-favorites-send-main > .chatdlm-scroll-area {
    flex: 1 1;
    min-height: 0;
    height: auto;
}

.chatdlm-favorites-send-cards {
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 0 24px 12px;
}

.chatdlm-favorites-send-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 24px;
    border-top: var(--wk-line);
}

.chatdlm-favorites-send-footer .chatdlm-settings-button {
    min-width: 96px;
}

/* 换头像的裁剪(2026-11-12，照参考)：颜色都用现有的——底是弹窗的遮罩色，框外再压一层同样的遮罩，
   框线和角标用白，工具条照全站提示框(页面底色、线、圆角、浮起阴影)，里面是设置里的按钮和全站图标按钮 */

.chatdlm-avatar-cropper {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background-color: var(--semi-color-overlay-bg);
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    -webkit-app-region: no-drag;
}

.chatdlm-avatar-cropper-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.chatdlm-avatar-cropper-image {
    position: absolute;
    pointer-events: none;
}

.chatdlm-avatar-cropper-box {
    position: absolute;
    box-sizing: border-box;
    border: 1px solid var(--semi-color-white);
    box-shadow: 0 0 0 100vmax var(--semi-color-overlay-bg);
    cursor: move;
    touch-action: none;
}

/* 四个角标：L 形，3px 粗、24px 长，压在框线外面一点；拖它放大缩小 */
.chatdlm-avatar-cropper-corner {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 0 solid var(--semi-color-white);
    touch-action: none;
}

.chatdlm-avatar-cropper-corner-top-left {
    left: -4px;
    top: -4px;
    border-left-width: 3px;
    border-top-width: 3px;
    cursor: nwse-resize;
}

.chatdlm-avatar-cropper-corner-top-right {
    right: -4px;
    top: -4px;
    border-right-width: 3px;
    border-top-width: 3px;
    cursor: nesw-resize;
}

.chatdlm-avatar-cropper-corner-bottom-left {
    left: -4px;
    bottom: -4px;
    border-left-width: 3px;
    border-bottom-width: 3px;
    cursor: nesw-resize;
}

.chatdlm-avatar-cropper-corner-bottom-right {
    right: -4px;
    bottom: -4px;
    border-right-width: 3px;
    border-bottom-width: 3px;
    cursor: nwse-resize;
}

.chatdlm-avatar-cropper-toolbar {
    position: absolute;
    left: 50%;
    bottom: 36px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 10px 14px;
    background-color: var(--chatdlm-page-background);
    border: var(--wk-line);
    border-radius: 999px;
    box-shadow: var(--semi-shadow-elevated);
}

.chatdlm-avatar-cropper-toolbar .chatdlm-settings-button {
    min-width: 88px;
    border-radius: 999px;
}

.wk-channelavatar {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-top: 40px;
    flex-direction: column;
}

.wk-channelavatar-avatar {
    width: 200px;
    height: 200px;
    
}

.wk-channelavatar-upload {
    margin-top: 20px;
}



.wk-imagetoolbar {
   
}

.wk-imagetoolbar-content {
}

.wk-imagetoolbar-content-icon  img{
    width: 20px;
    height: 20px;
}

.wk-imagetoolbar-content-icon {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}


.wk-imagedialog {
    display: flex;
    justify-content: center;
    align-items: center;

    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-app-region: no-drag;
    z-index: 100;
}

.wk-imagedialog-mask {
    position: absolute;
    background-color: var(--chatdlm-mask);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.wk-imagedialog-content {
    width: 420px;
    position: relative;
    padding: 28px;
    background: var(--wk-color-item);
    border: var(--wk-line);
    border-radius: 4px;
    overflow: hidden;
    box-sizing: border-box;
    max-height: 580px;
}

.wk-imagedialog-content-close {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 28px;
    right: 28px;
    font-size: 18px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
    line-height: 18px;
}

.wk-imagedialog-content-close svg {
    fill: var(--wk-text-item);
}

.wk-imagedialog-content-title {
    font-size: 16px;
    font-weight: 600;
}

.wk-imagedialog-content-body {
    width: 100%;
    font-size: 14px;
    text-align: center;
    margin-top: 28px;
}

.wk-imagedialog-content-preview {
    box-sizing: border-box;
    text-align: left;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    border-radius: 4px 4px 4px 4px;
}

.wk-imagedialog-content-previewImg {
    width: auto;
    height: auto;
    max-width: 240px;
    max-height: 240px;
    background-size: auto 100%;
    background-position: 50%;
    margin: 0 auto 16px;
}

.wk-imagedialog-content-preview-file {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.wk-imagedialog-content-preview--filecontent {
    flex: 1 1;
    width: 100%;
    height: 78px;
    padding: 12px 0px 12px 20px;
    overflow: hidden;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    background-color: var(--chatdlm-layer-static);
}

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

.wk-imagedialog-content-preview-file-icon {
    height: 78px;
    width: 78px;
    display: flex;
    align-items: center;
    border-radius: 0px 0px 0px 10px;
}

.wk-imagedialog-content-preview-file-thumbnail {
    width: 48px;
    height: 48px;
    margin: auto 16px auto auto;
}

.wk-imagedialog-content-preview--filecontent-name {
    color: var(--wk-text-item);
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    line-height: normal;
}

.wk-imagedialog-content-preview--filecontent-size {
    font-size: 12px;
    color: var(--wk-color-font-tip);
}

.wk-imagedialog-footer {
    margin-top: 28px;
    justify-content: flex-end;
    display: flex;
}

.wk-imagedialog-footer button{
    background-color: var(--chatdlm-page-background);
    border: var(--wk-line);
    color: var(--chatdlm-text-primary);
    border-radius: 4px;
    height: 32px;
    min-width: 100px;
    padding: 0 16px;
    cursor: pointer;
}

.wk-imagedialog-footer-okbtn {
    margin-left: 16px;
    color: var(--chatdlm-on-brand) !important;
    border: none !important;
}

/* 图标三层：静止次级字色 / 悬停正文字色 */
.wk-imagetoolbar-content {
    color: var(--chatdlm-text-secondary);
    display: flex;
    align-items: center;
}

.wk-imagetoolbar-content:hover {
    color: var(--chatdlm-text-primary);
}


.wk-message-system {
    padding: 10px 20px;
    width: 85%;
    margin: 0 auto;
    text-align: center;
    margin-top: 15px;
    font-size: 12px;
    color: var(--chatdlm-text-tertiary);
    white-space:  pre-line;
}
.wk-message-approve {
    margin-left: 10px;
    color: var(--chatdlm-brand); /* 原来是唐僧叨叨的橙(品牌色)，2026-11-12 砍掉：可点的字一律主色 */
}
body[theme-mode=dark] .wk-message-system  {
    color: var(--chatdlm-text-tertiary);
}
/* 独立窗口右边的助理：照第三栏(.chatdlm-tool-pane)——左边一条线、页面底色、贴左边能拖宽 */
.chatdlm-window-assistant-pane {
    flex-shrink: 0;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: var(--wk-line);
    background-color: var(--chatdlm-page-background);
}

.chatdlm-window-assistant-pane .wk-chat-content-right {
    flex: 1 1;
    min-height: 0;
}

/* 画白板(见 index.tsx)：外框、工具栏、底下状态行用写笔记那一套(.chatdlm-note-editor-*)；
   白板是页面底色加一层点阵(点用线的颜色)；卡片照收藏卡片(静底、圆角)，笔记卡片白底加一圈线；选中、连线、圆点都用主色；
   颜色、字号全部取色板变量，没有新色号 */

.chatdlm-whiteboard-toolbar-button {
    height: 28px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.chatdlm-whiteboard {
    flex: 1 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
    outline: none;
    cursor: default;
    touch-action: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    background-color: var(--chatdlm-page-background);
    background-image: radial-gradient(var(--chatdlm-layer-line) 1px, transparent 1px);
}

.chatdlm-whiteboard-panning {
    cursor: grabbing;
}

/* 白板上的东西都画在这一层，挪、放大缩小只改它的 transform */
.chatdlm-whiteboard-world {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    transform-origin: 0 0;
}

/* 连线：大图本身不吃鼠标，只有线(加宽的透明那根)吃 */
.chatdlm-whiteboard-lines {
    position: absolute;
    left: -20000px;
    top: -20000px;
    overflow: visible;
    pointer-events: none;
}

.chatdlm-whiteboard-line {
    fill: none;
    stroke: var(--chatdlm-text-tertiary);
    stroke-width: 1.5;
    pointer-events: none;
}

/* 连着空卡片的线(骨架)：虚线，跟虚线框一起 */
.chatdlm-whiteboard-line-placeholder {
    stroke-dasharray: 5 4;
}

.chatdlm-whiteboard-line-pending {
    stroke: var(--chatdlm-brand);
    stroke-dasharray: 5 4;
}

.chatdlm-whiteboard-line-selected {
    stroke: var(--chatdlm-brand);
    stroke-width: 2;
}

.chatdlm-whiteboard-line-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 12;
    pointer-events: stroke;
    cursor: pointer;
}

/* 卡片：照收藏卡片(静底、圆角)，字居中；悬停底色深一档，选中一圈主色 */
.chatdlm-whiteboard-card {
    position: absolute;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: var(--chatdlm-bubble-radius);
    border: 1.5px solid transparent;
    background-color: var(--chatdlm-layer-static);
    color: var(--chatdlm-text-primary);
    font-size: var(--chatdlm-message-font-size);
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: grab;
}

.chatdlm-whiteboard-card:hover {
    background-color: var(--chatdlm-layer-hover);
}

.chatdlm-whiteboard-card-selected,
.chatdlm-whiteboard-card-selected:hover {
    border-color: var(--chatdlm-brand);
}

/* 第一张(主题)：字大一档、加粗 */
.chatdlm-whiteboard-card-topic {
    font-size: 17px;
    font-weight: 600;
}

.chatdlm-whiteboard-card-text {
    text-align: center;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 空卡片(「点这里打字」)：虚线框、透明底、灰字，点一下就能打字 */
.chatdlm-whiteboard-card-empty,
.chatdlm-whiteboard-card-empty:hover {
    border: 1.5px dashed var(--chatdlm-layer-selected);
    background-color: transparent;
    color: var(--chatdlm-text-tertiary);
    cursor: text;
}

.chatdlm-whiteboard-card-empty.chatdlm-whiteboard-card-selected {
    border-color: var(--chatdlm-brand);
}

/* 打字的框：透明、无边，字跟卡片一样 */
.chatdlm-whiteboard-card-input {
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    resize: none;
    overflow: hidden;
    background: transparent;
    color: var(--chatdlm-text-primary);
    font: inherit;
    line-height: inherit;
    text-align: center;
    cursor: text;
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
}

.chatdlm-whiteboard-card-input::-moz-placeholder {
    color: var(--chatdlm-text-tertiary);
}

.chatdlm-whiteboard-card-input::placeholder {
    color: var(--chatdlm-text-tertiary);
}

/* 笔记卡片：页面底色加一圈线，左上角「笔记」小字，标题加粗，下面两行摘要 */
.chatdlm-whiteboard-card-note {
    justify-content: flex-start;
    border-color: var(--chatdlm-layer-line);
    background-color: var(--chatdlm-page-background);
}

.chatdlm-whiteboard-card-note:hover {
    background-color: var(--chatdlm-layer-static);
}

.chatdlm-whiteboard-card-note-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--chatdlm-text-tertiary);
}

.chatdlm-whiteboard-card-note-title {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chatdlm-whiteboard-card-note-excerpt {
    margin-top: 2px;
    font-size: var(--chatdlm-list-preview-font-size);
    color: var(--chatdlm-text-secondary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 别处导进来的网址、分组：灰字摆着 */
.chatdlm-whiteboard-card-other {
    border: 1.5px dashed var(--chatdlm-layer-line);
    background-color: transparent;
    color: var(--chatdlm-text-secondary);
    overflow: hidden;
}

/* 正在连线：指到哪张卡片，哪张亮一圈主色 */
.chatdlm-whiteboard-card-connecting:hover {
    border-color: var(--chatdlm-brand);
}

/* 四条边中间的小圆点：悬停、选中才出来；按住拖就是连线 */
.chatdlm-whiteboard-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 2px solid var(--chatdlm-brand);
    background-color: var(--chatdlm-page-background);
    cursor: crosshair;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}

.chatdlm-whiteboard-card:hover > .chatdlm-whiteboard-dot,
.chatdlm-whiteboard-card-selected > .chatdlm-whiteboard-dot {
    opacity: 1;
    pointer-events: auto;
}

.chatdlm-whiteboard-dot:hover {
    background-color: var(--chatdlm-brand);
}

.chatdlm-whiteboard-dot-top {
    left: calc(50% - 6px);
    top: -7px;
}

.chatdlm-whiteboard-dot-bottom {
    left: calc(50% - 6px);
    bottom: -7px;
}

.chatdlm-whiteboard-dot-left {
    left: -7px;
    top: calc(50% - 6px);
}

.chatdlm-whiteboard-dot-right {
    right: -7px;
    top: calc(50% - 6px);
}

/* 底下一行提示(就是说明书)：胶囊、灰字，右边 × 收起(记在本机) */
.chatdlm-whiteboard-hint {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px;
    border-radius: 14px;
    border: var(--wk-line);
    background-color: var(--chatdlm-page-background);
    font-size: 12px;
    color: var(--chatdlm-text-tertiary);
    white-space: nowrap;
    z-index: 2;
}

.chatdlm-whiteboard-hint-close {
    display: flex;
    cursor: pointer;
}

.chatdlm-whiteboard-hint-close:hover {
    color: var(--chatdlm-text-primary);
}

/* 从收藏列表拖笔记过来、指到白板上：白板里圈一圈主色虚线(拖卡片的抽象加的类，见 IndependentWindow) */
.chatdlm-whiteboard.chatdlm-card-drop-hover {
    box-shadow: inset 0 0 0 2px var(--chatdlm-brand);
}

/* 双击笔记卡片：那篇笔记盖在白板上展开(后面白板淡一层)，× 回到白板 */
.chatdlm-whiteboard-note-dim {
    position: absolute;
    inset: 0;
    background-color: var(--chatdlm-page-background);
    opacity: .6;
    z-index: 3;
}

.chatdlm-whiteboard-note {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 16px;
    bottom: 16px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--chatdlm-bubble-radius);
    border: var(--wk-line);
    background-color: var(--chatdlm-page-background);
    box-shadow: var(--semi-shadow-elevated);
    cursor: auto;
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
}

.chatdlm-whiteboard-note-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 16px;
    border-bottom: var(--wk-line);
    color: var(--chatdlm-text-tertiary);
}

.chatdlm-whiteboard-note-header-text {
    flex: 1 1;
    min-width: 0;
    font-size: var(--chatdlm-list-preview-font-size);
    color: var(--chatdlm-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chatdlm-whiteboard-note-body {
    flex: 1 1;
    min-height: 0;
}

/* 写笔记的编辑器(见 index.tsx)：工具栏一排图标按钮(.chatdlm-icon-button)，
   查找替换一条(输入框照搜索框 .chatdlm-search-box，按钮照设置里的 .chatdlm-settings-button)，中间是编辑区，底下一行灰字状态；
   颜色、字号全部取色板变量，没有新色号 */
.chatdlm-note-editor {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--chatdlm-page-background);
    color: var(--chatdlm-text-primary);
}

/* 第三栏窄了放不下一排：折到第二排，不会被切掉 */
.chatdlm-note-editor-toolbar,
.chatdlm-note-editor-find {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 6px 12px;
    border-bottom: var(--wk-line);
}

.chatdlm-note-editor-find {
    gap: 8px;
    padding: 8px 12px 8px 20px;
}

/* 「更多工具」按钮外面那一层(弹出菜单要挂在它上面)：不占地方，就是按钮本身 */
.chatdlm-note-editor-more-box {
    display: flex;
    flex-shrink: 0;
}

/* 工具栏只占一排：放不下的收进「···」菜单(index.tsx fitToolbar)，不折到第二排(2026-11-10 用户定) */
.chatdlm-note-editor-toolbar {
    flex-wrap: nowrap;
    overflow: hidden;
}

.chatdlm-note-editor-toolbar-gap {
    width: 10px;
    flex-shrink: 0;
}

.chatdlm-note-editor-toolbar-space {
    flex: 1 1;
}

/* 工具栏靠右的一组(撤销、重做、标签、发到聊天)：一直贴着右边 */
.chatdlm-note-editor-toolbar-end {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}

.chatdlm-note-editor-find-field {
    flex: 0 1 200px;
    margin: 0;
    background-color: var(--chatdlm-layer-static);
}

.chatdlm-note-editor-find-count {
    min-width: 44px;
    text-align: center;
    font-size: var(--chatdlm-list-preview-font-size);
    color: var(--chatdlm-text-tertiary);
}

.chatdlm-note-editor-find-button {
    height: 28px;
    padding: 0 12px;
    flex-shrink: 0;
}

.chatdlm-note-editor-body {
    flex: 1 1;
    min-height: 0;
    position: relative;
}

/* 编辑区外面这一层在滚(悬浮滚动条包着它)，编辑器本身跟着字长高 */
.chatdlm-note-editor-scroll {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    cursor: text;
}

.chatdlm-note-editor-host {
    min-height: 100%;
}

.chatdlm-note-editor-empty {
    padding: 16px 20px;
    font-size: var(--chatdlm-message-font-size);
    color: var(--chatdlm-text-tertiary);
}

.chatdlm-note-editor-status {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 8px 20px 10px;
    font-size: var(--chatdlm-list-preview-font-size);
    color: var(--chatdlm-text-tertiary);
}

.chatdlm-note-editor-status-link {
    cursor: pointer;
}

.chatdlm-note-editor-status-link:hover {
    color: var(--chatdlm-text-secondary);
}

.chatdlm-note-editor-status-notice {
    color: var(--chatdlm-text-secondary);
}

.chatdlm-note-editor-backlinks {
    padding: 4px 0;
    max-width: 320px;
}

/* 写笔记里的文件卡片(2026-11-11 用户定照微信)：样式用全局搜索文件那一行(wk-item-file)，底色取它原有的鼠标移上去那个灰；
   传好了的能点开：鼠标移上去文件名变主色 */
/* 卡片外面那层是 inline-block：编辑器在卡片两边放了两个看不见的光标占位，块级的话一行会多出两行高 */
.chatdlm-note-file-holder {
    display: inline-block;
    vertical-align: top;
    width: 360px;
    max-width: 100%;
}
.chatdlm-note-file {
    grid-template-columns: auto minmax(0, 1fr);
    margin: 4px 0;
    background-color: var(--chatdlm-layer-static);
    cursor: default;
}
body[theme-mode=dark] .chatdlm-note-file {
    background-color: var(--chatdlm-layer-static);
}
.chatdlm-note-file-openable {
    cursor: pointer;
}
.chatdlm-note-file-openable:hover .wk-item-file-name {
    color: var(--wk-color-theme);
}
.chatdlm-note-file .wk-item-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chatdlm-note-file .wk-item-file-desc {
    min-width: 0;
    white-space: nowrap;
}
.chatdlm-note-file-failure {
    color: var(--semi-color-danger);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chatdlm-note-file-action {
    color: var(--wk-color-theme);
    cursor: pointer;
}

/* 缩放(2026-11-11 用户定：撤销前面 − 百分比 +，Ctrl+加/减/0、Ctrl+滚轮)：百分比就是一个图标按钮(同一套悬停底)，里面放字，点了回 100% */
.chatdlm-note-editor-zoom {
    width: auto;
    min-width: 44px;
    padding: 0 4px;
    font-size: var(--chatdlm-list-preview-font-size);
}

/* 状态栏左边的「普通 | Markdown」：当前那个次级字色，另一个照状态栏里能点的字(.chatdlm-note-editor-status-link) */
.chatdlm-note-editor-modes {
    margin-right: 16px;
}
.chatdlm-note-editor-mode-current {
    color: var(--chatdlm-text-secondary);
}
.chatdlm-note-editor-modes-separator {
    margin: 0 6px;
    color: var(--chatdlm-layer-line);
}

/* 做成：两列按钮(样子照收藏左栏「写笔记」)，底下一行灰字说明(12px、更弱一档字色，照删除确认那行和弹出框小标题) */
.chatdlm-make-panel {
    padding: 16px;
}

.chatdlm-make-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    gap: 10px;
}

/* 第三栏是白底(左栏是灰底)：按钮底色换成收藏卡片那三层(静止、悬停、按下)，不然看不见 */
.chatdlm-make-panel .chatdlm-make-panel-button {
    justify-content: flex-start;
    padding: 0 14px;
    background-color: var(--chatdlm-layer-static);
}

.chatdlm-make-panel .chatdlm-make-panel-button:hover {
    background-color: var(--chatdlm-layer-hover);
}

.chatdlm-make-panel .chatdlm-make-panel-button:active {
    background-color: var(--chatdlm-layer-selected);
}

.chatdlm-make-panel .chatdlm-make-panel-button-disabled,
.chatdlm-make-panel .chatdlm-make-panel-button-disabled:hover,
.chatdlm-make-panel .chatdlm-make-panel-button-disabled:active {
    color: var(--chatdlm-text-tertiary);
    background-color: var(--chatdlm-layer-static);
    cursor: default;
}

.chatdlm-make-panel-hint {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--chatdlm-text-tertiary);
}

/* 第三栏：跟聊天区并排、各占一半，左边一条分隔线；颜色、高度、按钮全部取现有的变量和 .chatdlm-icon-button、.chatdlm-search-box */
.chatdlm-tool-pane {
    flex: 1 1;
    min-width: 0;
    position: relative;          /* 左边线上的拖宽抓手(PaneDivider)贴着它放 */
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: var(--wk-line);
    background-color: var(--chatdlm-page-background);
}

/* 顶上一排：跟聊天头部同高、同底线；空白处可以按住拖动窗口(跟聊天头部一样) */
.chatdlm-tool-pane-header {
    height: var(--wk-height-chat-conversation-header);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: var(--wk-line);
    padding: 0 0.8125rem 0 var(--chatdlm-chat-title-left);
    box-sizing: border-box;
    -webkit-app-region: drag;
}

/* 收藏里写笔记、画白板时头上左边的标题：照聊天头部的标题(字号、颜色)，太长省略 */
.chatdlm-tool-pane-title {
    flex: 1 1;
    min-width: 0;
    font-size: var(--chatdlm-chat-title-font-size);
    color: var(--chatdlm-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chatdlm-tool-pane-tabs,
.chatdlm-tool-pane-actions {
    display: flex;
    gap: 8px;                    /* 跟聊天头部右边按钮的间距一样 */
}

.chatdlm-tool-pane-body {
    flex: 1 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* 地址栏这一行：照会话列表顶部搜索那一行(同高、同底色，搜索框在上面才看得出来) */
.chatdlm-tool-pane-toolbar {
    height: var(--wk-height-chat-search);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 0.8125rem 0 8px;
    border-bottom: var(--wk-line);
    background-color: var(--chatdlm-list-background);
    box-sizing: border-box;
}

.chatdlm-tool-pane-address {
    margin: 0 0 0 6px;
}

.chatdlm-tool-pane-page {
    flex: 1 1;
    min-height: 0;
    display: flex;
}

.chatdlm-tool-pane-webview {
    flex: 1 1;
    width: 100%;
    height: 100%;
    border: none;
}

/* 空白：正中灰色站标，跟右栏没选会话时同一个灰；栏比右栏窄，站标缩到 120px */
.chatdlm-tool-pane-empty {
    flex: 1 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chatdlm-tool-pane-empty-logo {
    width: 120px;
    height: 120px;
    background-color: var(--chatdlm-layer-selected);
}



.wk-search-box {
    display: flex;
    min-width: 200px;
    height: 45px;
    background-color: var(--chatdlm-layer-static);
    border-radius: 25px;
}

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

.wk-search-icon {
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.wk-search-input {
    margin-left: 10px;
    max-width: 100px;
}

.wk-search-input input {
    flex: 1 1;
    height: 32px;
    font-size: 12px;
    line-height: 18px;
    background-color: transparent;
    color: var(--chatdlm-text-primary);
    padding: 0;
    outline: none;
    border: none;
    height: 100%;
}

body[theme-mode=dark] .wk-search-input input {
    color: var(--chatdlm-text-primary);
}


.wk-search-input .semi-input-wrapper{
    height: 100%;
    background-color: var(--chatdlm-page-background);
}

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;
}

:root {
    --wk-height-navheader: 64px;
}

.wk-navheader {
   
    height: 64px;
   
    height: var(--wk-height-navheader);
    width: 100%;
    background-color: var(--wk-color-secondary);
}

.wk-navheader-content {
    padding: 0px 20px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wk-navheader-content-left-title {
    font-size: 24px;
    font-weight: 500;
}

body[theme-mode=dark] .wk-navheader-content-left-title {
    color: var(--chatdlm-text-primary);
} 


.wk-qrcodemy {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.wk-qrcodemy-content-qrcodebox {

    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.wk-qrcodemy-content-qrcodeinfo {
    background-color: var(--chatdlm-page-background);
    width: 100%;
    height: 100%;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

.wk-qrcodemy-content-userinfo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-top: 15px;
}

.wk-qrcodemy-content-userinfo-avatar img{
    width: 50px;
    height: 50px;
    border-radius: var(--chatdlm-avatar-radius);
}

.wk-qrcodemy-content-qrcode {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    width: 250px;
    height: 250px;
}

.wk-qrcodemy-content-tip {
    font-size: 13px;
    text-align: center;
    color: var(--chatdlm-text-tertiary);
    margin: 15px 0px;
}

.wk-qrcodemy-content-userinfo-name {
    font-size: 15px;
    font-weight: 500;
}

body[theme-mode=dark]  .wk-qrcodemy-content-userinfo-name {
    color: var(--chatdlm-text-primary);
}
/* 通讯录功能行：微信实测行距 54 像素 → 36px；箭头距搜索框左边 10 像素 → 7px；文字距左 34 像素 → 23px；数字右对齐到搜索框右边 */
.wk-iconlistitem {
    height: 36px;
    width: 100%;
    cursor: pointer;
    box-sizing: border-box;
    padding: 0 12px 0 16px;       /* 与会话列表搜索行同一左右内边距 */
}

.wk-iconlistitem-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    border-radius: var(--chatdlm-icon-button-radius);
}

.wk-iconlistitem:hover .wk-iconlistitem-content {
    background-color: var(--chatdlm-list-item-hover);
}

/* 选中行(发现页左栏)：主色底、白字，同会话选中行 */
.wk-iconlistitem-selected .wk-iconlistitem-content,
.wk-iconlistitem-selected:hover .wk-iconlistitem-content {
    background-color: var(--chatdlm-brand);
}

.wk-iconlistitem-selected .wk-iconlistitem-content-icon,
.wk-iconlistitem-selected .wk-iconlistitem-content-title,
.wk-iconlistitem-selected .wk-iconlistitem-content-badge {
    color: var(--chatdlm-on-brand);
}

.wk-iconlistitem-content-icon {
    width: 23px;
    padding-left: 7px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    color: var(--chatdlm-text-primary);
}

.wk-iconlistitem-content-title {
    font-size: var(--chatdlm-chat-title-font-size);
    color: var(--chatdlm-text-primary);
    flex: 1 1;
}

.wk-iconlistitem-content-badge {
    font-size: var(--chatdlm-chat-title-font-size);
    color: var(--chatdlm-text-tertiary);
    padding-right: 7px;
}

.wk-sex-select {
    width: 100%;
    height: 100%;
}

.wk-sex-select-item {
    background-color: var(--chatdlm-page-background);
    height: 50px;
    width: 100%;
    background-color: var(--wk-color-item);
    display: flex;
    align-items: center;
    cursor: pointer;
}

.wk-sex-select-item .checked {
    color: var(--wk-color-theme);
    margin-left: 40px;
}

.wk-sex-select-item .sex {
    margin-left: 20px;
}

.wk-meinfo {
    background-color: var(--wk-color-secondary);
    position: relative;
    --wk-height-userInfo-footer: 60px;
    --wk-height-userInfo-nav: 44px;
    width: 100%;
    height: 100%;
}

.wk-meinfo-sections {
    
}

.wk-smalltableedit {
    overflow-y: auto;
    width: 100%;
    height: 100%;
}

.wk-smalltableedit-content-item{
    display: flex;
    padding: 5px 15px;
    background-color: var(--wk-color-item);
}

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


.wk-smalltableedit-content-item-avatar img {
    width: 32px;
    height: 32px;
    border-radius: var(--chatdlm-avatar-radius);
}

.wk-smalltableedit-content-item-name {
    margin-left: 15px;
    max-width: 200px;
    line-height: 40px;
    color: var(--wk-text-item);
   
}

.wk-smalltableedit-content-item-action {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
}


.wk-blacklist {

}

.wk-blacklist-content ul li {
    height: 80px;
    width: 100%;
    background-color: var(--wk-color-item);
    display: flex;
    align-items: center;
    cursor: pointer;
}


.wk-blacklist-content-avatar {
    margin-left: 15px;
}

.wk-blacklist-content-avatar img{
    width: 50px;
    height: 50px;
    border-radius: var(--chatdlm-avatar-radius);
}

.wk-blacklist-content-title {
    margin-left: 15px;
    font-size: 15px;
    font-weight: 500;
    color: var(--wk-text-item);
}
.wk-friendadd .wk-search-box {
  border-radius: 0px;
  background-color: var(--chatdlm-page-background);
}

.wk-friendadd .wk-search-input {
  max-width: 100%;
}

.wk-friendadd .wk-search-input input {
  width: 250px;
}

.wk-friendadd-content-qrcode {
  margin-top: 10px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

body[theme-mode="dark"] .wk-friendadd-content-qrcode {
  color: var(--chatdlm-text-primary);
}

.wk-friendadd-content-qrcode img {
  margin-left: 4px;
  width: 18px;
  height: 18px;
  cursor: pointer;
}



.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: 80px;
    background-color: var(--wk-color-item);
    display: flex;
    align-items: center;
    cursor: pointer;
}

.wk-groupsave-content-avatar {
    margin-left: 15px;
}

.wk-groupsave-content-avatar img{
    width: 50px;
    height: 50px;
    border-radius: var(--chatdlm-avatar-radius);
}

.wk-groupsave-content-title {
    margin-left: 15px;
    font-size: 15px;
    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: 80px;
    background-color: var(--wk-color-item);
    align-items: center;
}


.wk-newfriend-content-avatar {
   margin-left: 15px;
}

.wk-newfriend-content-avatar img{
    width: 50px;
    height: 50px;
    border-radius: var(--chatdlm-avatar-radius);
}

.wk-newfriend-content-title {
    margin-left: 15px;
    font-size: 15px;
    font-weight: 500;
    color: var(--wk-text-item);
}

.wk-newfriend-content-title-remark {
    font-size: 12px;
    color: var(--chatdlm-text-secondary);
    margin-top: 5px;
}

.wk-newfriend-content-action {
    margin-right: 10px;
    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: 500px;
  display: flex;
}
.wk-main-modal-organizational-group-new .semi-modal-content {
  border: none !important;
  padding: 0px !important;
}

.wk-organizational-group-new-left {
  width: 50%;
  height: 100%;
  background-color: var(--wk-color-secondary);
  padding: 12px;
  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: 12px;
}
.wk-organizational-group-new-left
  .group-new-left-search
  .group-new-left-search-input.semi-input-wrapper-focus {
  border: var(--wk-color-theme) solid 1px;
}
.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 1px;
}
/* 好友选择 */
.group-new-left-main .friend-opt .organization-name {
  display: flex;
  align-items: center;
  padding: 12px 8px;
  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: 12px 8px;
  font-size: 14px;
  line-height: 20px;
  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 .organizational-opt {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.group-new-left-main .organizational-opt-header {
  height: 44px;
  margin-bottom: 12px;
  border-radius: 4px;
}
.group-new-left-main .organizational-opt-header .wk-viewqueueheader {
  background-color: var(--semi-color-fill-0);
  height: 100%;
}
.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 1px;
}
.organizational-tree .semi-input-wrapper-focus:active {
  border: var(--wk-color-theme) solid 1px;
}
.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: 12px;
  padding-bottom: 12px;
}

.semi-checkbox:hover .semi-checkbox-inner-display {
  background: var(--semi-color-fill-0);
  box-shadow: inset 0 0 0 1px 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: var(--chatdlm-on-brand);
}

.organizational-tree .semi-tree-option-list-block .semi-tree-option-selected {
  background-color: var(--wk-color-theme);
  color: var(--chatdlm-on-brand);
}

.organizational-tree
  .semi-tree-option-list-block
  .semi-tree-option-selected:hover {
  background-color: var(--wk-color-theme);
  color: var(--chatdlm-on-brand);
}

.organizational-tree
  .semi-tree-option-list-block
  .semi-tree-option-selected
  .semi-tree-option-expand-icon {
  color: var(--chatdlm-on-brand);
}

.wk-organizational-group-new-right {
  width: 50%;
  height: 100%;
  background-color: var(--wk-color-item);
  padding: 12px;
  display: flex;
  flex-direction: column;
}
.wk-organizational-group-new-right .organizational-group-new-right-title {
  font-size: 15px;
  font-weight: bold;
}
.wk-organizational-group-new-right .organizational-group-new-right-body {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 12px 0;
}
.wk-organizational-group-new-right
  .organizational-group-new-right-body
  .opt-personnel-item {
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
  word-break: break-word;
  color: var(--semi-color-text-0);
}

.wk-organizational-group-new-right
  .organizational-group-new-right-body
  .opt-personnel-item
  .user-info {
  display: flex;
  align-items: center;
}

.wk-organizational-group-new-right
  .organizational-group-new-right-body
  .opt-personnel-item
  .close-icon {
  display: flex;
  align-items: center;
}

.wk-organizational-group-new-right
  .organizational-group-new-right-body
  .opt-personnel-item
  .close-icon
  .semi-icon {
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wk-organizational-group-new-right
  .organizational-group-new-right-body
  .opt-personnel-item
  .close-icon
  .semi-icon:hover {
  background-color: var(--chatdlm-overlay-hover);
}

.wk-organizational-group-new-right .organizational-group-new-right-footer {
  display: flex;
  justify-content: flex-end;
}

.wk-but-ok:hover {
  background-color: var(--wk-color-theme) !important;
}
.wk-contacts {
    width: 100%;
    height: 100%;
    border-right: var(--wk-line);
    background-color: var(--chatdlm-list-background);
}

.wk-contacts-content {
    width: 100%;
    height: calc(100% - var(--wk-height-chat-search));
    overflow-y: auto;
}

.wk-contacts-content-fnc {
    width: 100%;
    padding-bottom: 8px;
}

.wk-contacts-content-contacts {
    width: 100%;
}

/* 字母分组：行与会话列表同高(80px)、头像同大(50px)，全行悬停、选中铺主色 */
.wk-contacts-section-item {
    display: flex;
    align-items: center;
    height: 80px;
    padding-right: 12px;
    cursor: pointer;
}

.wk-contacts-section-item:hover {
    background-color: var(--chatdlm-list-item-hover);
}

.wk-contacts-section-item-selected,
.wk-contacts-section-item-selected:hover {
    background-color: var(--chatdlm-brand);
}

.wk-contacts-section-item-index {
    width: 50px;
    text-align: center;
    font-size: 14px;
    color: var(--chatdlm-text-secondary);
}

.wk-contacts-section-item-avatar img {
    width: 50px;
    height: 50px;
    border-radius: var(--chatdlm-avatar-radius);
    display: block;
}

.wk-contacts-section-item-name {
    margin-left: 15px;
    font-size: 1rem;
    color: var(--chatdlm-text-primary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wk-contacts-section-item-selected .wk-contacts-section-item-index,
.wk-contacts-section-item-selected .wk-contacts-section-item-name {
    color: var(--chatdlm-on-brand);
}

#root {
  width: 100%;
  height: 100%;
}

:root {
  --sider-width: 60px
}

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

.wk-main-content {
    width: calc(100% - 60px
);
    width: calc(100% - var(--sider-width));
    height: 100%;
    background-color: var(--chatdlm-page-background);
}

/* 空白页(收藏、发现占位)：左栏，与会话列表同色同右边线 */
.chatdlm-blank-page {
    width: 100%;
    height: 100%;
    background-color: var(--chatdlm-list-background);
    border-right: var(--wk-line);
    box-sizing: border-box;
}




.wk-main-sider {
    width: var(--sider-width);
    height: 100%;
    background-color: var(--chatdlm-navigation-background);
}


.wk-main-sider-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
}

/* 导航头像：微信实测 64 像素，与右边搜索框垂直居中(头像中心 96.5、搜索框中心 97)：顶部横条 32 + 搜索行一半 32 − 头像一半 21 = 43px */
.wk-main-sider-avatar {
    margin-top: calc(var(--chatdlm-title-strip-height) + var(--wk-height-chat-search) / 2 - var(--chatdlm-nav-button-size) / 2);
    width: var(--chatdlm-nav-button-size);
    height: var(--chatdlm-nav-button-size);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.wk-main-sider-avatar img{
    width: var(--chatdlm-nav-button-size);
    height: var(--chatdlm-nav-button-size);
    border-radius: var(--chatdlm-avatar-radius);
}

/* 导航图标按钮：三层样式走 .chatdlm-icon-button / -nav，这里只管间距 */
.wk-main-sider-item {
    margin-top: var(--chatdlm-nav-button-gap);
    position: relative;
}

.wk-main-sider-item img{
    width: 28px;
    height: 28px;
}

/* 底部菜单按钮：样式走 .chatdlm-icon-button-nav，展开时按选中态显示 */
.wk-main-sider-setting-box {
    position: absolute;
    bottom: 30px;
}

.wk-sider-setting-list {
    position: absolute;
    left: var(--sider-width);
    bottom: 0;
    z-index: 1;
    width: 140px;
    color: var(--chatdlm-text-primary);
    background-color: var(--chatdlm-layer-static);
    border: var(--wk-line);
   border-radius: 4px;

   transform: scale(0);
   transition: opacity .2s cubic-bezier(.2,0,.2,1),transform .2s cubic-bezier(.2,0,.2,1)!important;
   transform-origin: left bottom;
}

.wk-sider-setting-list.open {
    transform: scale(1);
}

.wk-sider-setting-list li {
    height: 46px;
    display: flex;
   align-items: center;
   padding-left: 20px;
   cursor: pointer;
}

.wk-sider-setting-list li:hover {
    background-color: var(--chatdlm-layer-hover);
}

.wk-main-sider-item-badge {
    position: absolute;
    top: -6px;
    right: -2px;
}


.wk-versioncheckview-updateinfo {
    font-weight: 500;
}

.wk-versioncheckview-updateinfo  li {
    margin-bottom: 10px;
}

/* 更新内容(服务器发版时写的说明，一行一条)：长的一条在框里折行，不出横向滚动条；字体跟上面两行一样，不用等宽字 */
.wk-versioncheckview-updateinfo pre {
    margin: 0;
    font-family: inherit;
    white-space: pre-wrap;
    word-break: break-word;
}

.wk-versioncheckview-tip {
    border-top: var(--wk-line);
}

.wk-versioncheckview-tip-title {
    margin-top: 15px;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 15px;
}

.wk-versioncheckview-tip-content {
    margin-bottom: 40px;
}

.wk-versioncheckview-tip-content li {
    margin-bottom: 10px;
}

.wk-main-sider-setting-badge {
    position: absolute;
    right: 5px;
    top: -10px;
}


.wk-main-sider-modal .semi-modal-content  {
    border: none !important;
    padding: 0px !important;
  }
  
  .wk-main-sider-modal .semi-modal-close {
      display: none;
  }
  
  .wk-main-sider-modal .semi-modal-body-wrapper {
      margin: 0px;
  }
  
  /* .wk-base-modal-userinfo .semi-modal-body{
    height: 500px;
  } */

  .wk-main-sider-meinfo .semi-modal-body {
    height: 500px;
  }
/* 设置弹窗：去掉 Semi 弹窗自带的内边距和边框；方角、右上角关闭按钮是全站弹窗那一套(Components/Modal) */
.chatdlm-settings-modal .semi-modal-content {
    border: none !important;
    padding: 0 !important;
    background-color: var(--chatdlm-page-background);
    overflow: hidden;
}

.chatdlm-settings-modal .semi-modal-body-wrapper {
    margin: 0;
}

.chatdlm-settings-modal .semi-modal-body {
    padding: 0;
}

/* 窗：641×560(微信实测)，左栏 160 用列表底色，右栏页面底色 */
.chatdlm-settings {
    position: relative;
    display: flex;
    width: 641px;
    height: 560px;
    color: var(--chatdlm-text-primary);
}

.chatdlm-settings-nav {
    width: 160px;
    flex-shrink: 0;
    background-color: var(--chatdlm-list-background);
    padding-top: 40px;
}

/* 左栏项：行高 40，图标 20 距左 20，文字 14，选中铺主色白字(同发现页行) */
.chatdlm-settings-nav-item {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 20px;
    font-size: 14px;
    color: var(--chatdlm-text-primary);
    cursor: pointer;
}

.chatdlm-settings-nav-item:hover {
    background-color: var(--chatdlm-list-item-hover);
}

.chatdlm-settings-nav-item-selected,
.chatdlm-settings-nav-item-selected:hover {
    background-color: var(--chatdlm-brand);
    color: var(--chatdlm-on-brand);
}

/* 右栏：外面包着全站的悬浮滚动条(.chatdlm-scroll-area)，它占满剩下的宽，里面这层自己滚；
   上面空出 32px 一条给右上角的关闭按钮(跟窗口顶条一样高)，滚动的内容和滚动条都从它下面开始，不会滚到关闭按钮底下 */
.chatdlm-settings > .chatdlm-scroll-area {
    flex: 1 1;
    min-width: 0;
    height: auto;
    margin-top: 32px;
}

.chatdlm-settings-content {
    height: 100%;
    box-sizing: border-box;
    padding: 8px 40px 24px;
    overflow-y: auto;
}

.chatdlm-settings-section-title {
    font-size: 14px;
    padding-bottom: 14px;
    border-bottom: var(--wk-line);
}

.chatdlm-settings-section-title-gap {
    margin-top: 32px;
}

.chatdlm-settings-section-description {
    font-size: 12px;
    color: var(--chatdlm-text-secondary);
    padding: 8px 0 0;
}

/* 行：左标题(可带一行说明)右控件，单行 49、带说明 65，底边线 */
.chatdlm-settings-row {
    min-height: 49px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: var(--wk-line);
    font-size: 14px;
}

.chatdlm-settings-row-described {
    min-height: 65px;
}

.chatdlm-settings-row-text {
    flex: 1 1;
    min-width: 0;
}

.chatdlm-settings-row-label {
    color: var(--chatdlm-text-primary);
}

.chatdlm-settings-row-description {
    margin-top: 4px;
    font-size: 12px;
    color: var(--chatdlm-text-secondary);
}

.chatdlm-settings-row-control {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* 账号行：头像 56 圆角方 + 名字/账号 + 退出登录 */
.chatdlm-settings-row-account {
    min-height: 88px;
    gap: 14px;
}

.chatdlm-settings-avatar {
    width: 56px;
    height: 56px;
    border-radius: var(--chatdlm-avatar-radius);
    flex-shrink: 0;
}

/* 按钮：灰底圆角，三层(静止/悬停/按下) */
.chatdlm-settings-button {
    height: 32px;
    padding: 0 16px;
    border: none;
    border-radius: var(--chatdlm-icon-button-radius);
    background-color: var(--chatdlm-layer-static);
    color: var(--chatdlm-text-primary);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
}

.chatdlm-settings-button:hover {
    background-color: var(--chatdlm-layer-hover);
}

.chatdlm-settings-button:active {
    background-color: var(--chatdlm-layer-selected);
}

.chatdlm-settings-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 16px;
}

/* 分段选择(浅色/深色、小/中/大)：三层——静止、悬停底色、选中主色白字 */
.chatdlm-settings-segment {
    display: flex;
    gap: 4px;
}

.chatdlm-settings-segment-item {
    height: 28px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    border-radius: var(--chatdlm-icon-button-radius);
    color: var(--chatdlm-text-secondary);
    cursor: pointer;
}

.chatdlm-settings-segment-item:hover {
    color: var(--chatdlm-text-primary);
    background-color: var(--chatdlm-layer-hover);
}

.chatdlm-settings-segment-item-selected,
.chatdlm-settings-segment-item-selected:hover {
    color: var(--chatdlm-on-brand);
    background-color: var(--chatdlm-brand);
}

/* 颜色块：圆形 24px，选中外加一圈 */
.chatdlm-settings-colors {
    display: flex;
    gap: 14px;
}

.chatdlm-settings-color {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    box-sizing: border-box;
}

.chatdlm-settings-color:hover {
    box-shadow: 0 0 0 2px var(--chatdlm-layer-selected);
}

.chatdlm-settings-color-selected,
.chatdlm-settings-color-selected:hover {
    box-shadow: 0 0 0 2px var(--chatdlm-page-background), 0 0 0 4px var(--chatdlm-text-primary);
}

/* 快捷键：灰底圆角小片，键名 + 叉 */
.chatdlm-settings-key {
    height: 28px;
    padding: 0 8px 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--chatdlm-icon-button-radius);
    background-color: var(--chatdlm-layer-static);
    color: var(--chatdlm-text-primary);
    font-size: 13px;
}

.chatdlm-settings-key .chatdlm-theme-icon {
    color: var(--chatdlm-text-tertiary);
}

/* 开关跟主色 */
.chatdlm-settings .semi-switch-checked {
    background-color: var(--chatdlm-brand);
}

.chatdlm-settings-empty {
    padding-top: 8px;
    text-align: center;
    font-size: 14px;
    color: var(--chatdlm-text-secondary);
}

.chatdlm-settings-about {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.chatdlm-settings-about-footer {
    margin-top: auto;
    text-align: center;
    font-size: 12px;
    color: var(--chatdlm-text-tertiary);
    padding-bottom: 8px;
}

/* ===== 模型(服务商)：沿用设置窗的行/按钮/色号，只加输入框、下拉、字段三样 ===== */
.chatdlm-settings-section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chatdlm-settings-button-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-left: 12px;
}

.chatdlm-settings-button:disabled {
    opacity: 0.4;
    cursor: default;
}

.chatdlm-settings-button:disabled:hover {
    background-color: var(--chatdlm-layer-static);
}

/* 主按钮：主色底；危险按钮：红底白字(确认删除时才出现)；红字按钮：第一步的「删除」 */
.chatdlm-settings-button-primary,
.chatdlm-settings-button-primary:hover {
    background-color: var(--chatdlm-brand);
    color: var(--chatdlm-on-brand);
}

.chatdlm-settings-button-danger,
.chatdlm-settings-button-danger:hover {
    background-color: var(--chatdlm-danger);
    color: var(--chatdlm-fixed-white);
}

.chatdlm-settings-button-danger-text {
    color: var(--chatdlm-danger);
}

.chatdlm-settings-row-buttons {
    display: flex;
    gap: 8px;
}

.chatdlm-settings-confirm {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--chatdlm-danger);
}

/* 空态：虚线框 */
.chatdlm-settings-empty-box {
    margin-top: 16px;
    padding: 32px 16px;
    border: 1px dashed var(--chatdlm-layer-line);
    border-radius: var(--chatdlm-bubble-radius);
    font-size: 12px;
}

.chatdlm-settings-empty-title {
    font-size: 14px;
    color: var(--chatdlm-text-primary);
    margin-bottom: 8px;
}

/* 字段：标签在上、控件在下；两个短字段并排 */
.chatdlm-settings-field {
    margin-top: 16px;
    flex: 1 1;
    min-width: 0;
}

.chatdlm-settings-field-pair {
    display: flex;
    gap: 12px;
}

.chatdlm-settings-field-label {
    font-size: 12px;
    color: var(--chatdlm-text-secondary);
    margin-bottom: 6px;
}

.chatdlm-settings-input,
.chatdlm-settings-select select {
    width: 100%;
    height: 32px;
    box-sizing: border-box;
    padding: 0 10px;
    border: none;
    outline: none;
    border-radius: var(--chatdlm-icon-button-radius);
    background-color: var(--chatdlm-layer-static);
    color: var(--chatdlm-text-primary);
    font-size: 14px;
    font-family: inherit;
}

.chatdlm-settings-input::placeholder {
    color: var(--chatdlm-text-tertiary);
}

.chatdlm-settings-input:hover,
.chatdlm-settings-select select:hover {
    background-color: var(--chatdlm-layer-hover);
}

.chatdlm-settings-input:focus,
.chatdlm-settings-select select:focus {
    box-shadow: 0 0 0 1px var(--chatdlm-brand) inset;
}

.chatdlm-settings-select {
    position: relative;
}

.chatdlm-settings-select select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 30px;
    cursor: pointer;
}

.chatdlm-settings-select .chatdlm-theme-icon {
    position: absolute;
    right: 8px;
    top: 8px;
    color: var(--chatdlm-text-secondary);
    pointer-events: none;
}

/* 提示块与链接钮 */
.chatdlm-settings-field-hint {
    margin-top: 8px;
    font-size: 12px;
    color: var(--chatdlm-text-secondary);
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.chatdlm-settings-field-hint-block {
    margin-top: 16px;
    padding: 12px;
    border-radius: var(--chatdlm-icon-button-radius);
    background-color: var(--chatdlm-layer-static);
    word-break: break-all;
}

.chatdlm-settings-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 8px;
    margin-left: -8px;
    border: none;
    border-radius: var(--chatdlm-icon-button-radius);
    background: none;
    color: var(--chatdlm-brand);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

.chatdlm-settings-link:hover {
    background-color: var(--chatdlm-layer-hover);
}

.chatdlm-settings-model-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.chatdlm-settings-model-row .chatdlm-settings-input {
    flex: 1 1;
}

.chatdlm-settings-disabled {
    opacity: 0.3;
    cursor: default;
}

.chatdlm-settings-test-ok {
    color: var(--chatdlm-brand);
}

.chatdlm-settings-test-fail {
    color: var(--chatdlm-danger);
}

.chatdlm-settings-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 16px;
    border-top: var(--wk-line);
}

/* 行右侧的下拉(语言)：定宽 130，复用表单里的下拉样式 */
.chatdlm-settings-select-inline {
    width: 130px;
}

/* 左栏：与通讯录同色同边线；行从顶部横条下面留出与搜索行等高的空白，和会话、通讯录的列表起点对齐 */
.chatdlm-discover {
    width: 100%;
    height: 100%;
    background-color: var(--chatdlm-list-background);
    border-right: var(--wk-line);
    box-sizing: border-box;
}

/* 标题「发现」照微信实测：区高 79 像素→53px，字与行文字同字号同颜色，距左同图标 18px */
.chatdlm-discover-title {
    height: 53px;
    display: flex;
    align-items: center;
    padding-left: 18px;
    font-size: var(--chatdlm-chat-title-font-size);
    color: var(--chatdlm-text-primary);
    -webkit-app-region: drag;
}

.chatdlm-discover-list {
    padding-top: 0;
}

/* 右栏内容页：页面色，左右留白同聊天区两侧 */
.chatdlm-discover-page {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 40px 48px;
    background-color: var(--chatdlm-page-background);
    color: var(--chatdlm-text-primary);
}

.chatdlm-discover-page-scroll {
    overflow-y: auto;
}

.chatdlm-discover-page-title {
    font-size: 24px;
    line-height: 32px;
}

.chatdlm-discover-page-subtitle {
    margin-top: 8px;
    font-size: 14px;
    color: var(--chatdlm-text-secondary);
}

.chatdlm-discover-page-note {
    margin-top: 16px;
    font-size: 14px;
    color: var(--chatdlm-text-tertiary);
}

/* 空状态：虚线框，图标与文字居中 */
.chatdlm-discover-empty {
    margin-top: 24px;
    padding: 56px 24px;
    border: 1px dashed var(--chatdlm-layer-line);
    border-radius: var(--chatdlm-bubble-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--chatdlm-text-secondary);
}

.chatdlm-discover-empty-title {
    margin-top: 12px;
    font-size: 16px;
    color: var(--chatdlm-text-primary);
}

.chatdlm-discover-empty-tip {
    margin-top: 8px;
    font-size: 14px;
}

/* 连接器卡片：两列；静止灰底、悬停亮一档 */
.chatdlm-connector-grid {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 列能缩到 0：单行的说明再长也不把卡片撑出窗口，超出的用省略号 */
    grid-gap: 16px;
    gap: 16px;
}

.chatdlm-connector {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: var(--chatdlm-bubble-radius);
    background-color: var(--chatdlm-layer-static);
    color: var(--chatdlm-text-tertiary);
    cursor: pointer;
}

.chatdlm-connector:hover {
    background-color: var(--chatdlm-layer-hover);
}

.chatdlm-connector-logo {
    width: 42px;
    height: 42px;
    border-radius: var(--chatdlm-logo-radius);
    background-color: var(--chatdlm-layer-selected);
    color: var(--chatdlm-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.chatdlm-connector-text {
    flex: 1 1;
    min-width: 0;
}

.chatdlm-connector-name {
    font-size: 16px;
    color: var(--chatdlm-text-primary);
}

.chatdlm-connector-description {
    margin-top: 2px;
    font-size: 14px;
    color: var(--chatdlm-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chatdlm-connector-status {
    font-size: 14px;
    flex-shrink: 0;
}

/* 扩展详情(2026-11-09)：上面那张卡占满一行；「包含的工具」跟卡片的间距；只排版，不加色号字号 */
.chatdlm-connector-grid-single {
    grid-template-columns: minmax(0, 1fr);
}

.chatdlm-extension-section {
    margin-top: 24px;
}

.chatdlm-connector-grid.chatdlm-extension-tools {
    margin-top: 12px;
}

.chatdlm-connector .chatdlm-settings-button {
    flex-shrink: 0;
}

/* 发现页的行照微信实测(1.5 倍)：行高 102 像素→68px、通栏无圆角，图标 36 像素→24px、距左 27 像素→18px，文字距左 79 像素→53px、字号同聊天标题 */
.chatdlm-discover .wk-iconlistitem {
    height: 68px;
    padding: 0;
}

.chatdlm-discover .wk-iconlistitem-content {
    border-radius: 0;
}

.chatdlm-discover .wk-iconlistitem-content-icon {
    width: 53px;
    padding-left: 18px;
}

/* 贴图页(照通搜个人主页网页截图按 1.5 倍换算)：封面高 = 宽 × 0.41；头像 80px 圆角方、圆心压在封面下沿、距左 17px；昵称 24px；签名 16px 次级色；TAB 高 40px、字 16px、选中正文字色 + 2px 主色下划线(与文字等宽) */
.chatdlm-profile {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: var(--chatdlm-page-background);
    color: var(--chatdlm-text-primary);
}

.chatdlm-profile-cover {
    width: 100%;
    padding-top: 41%;
    background-color: var(--chatdlm-layer-static);
    background-size: cover;
    background-position: center;
}

/* 镜像：头像靠右，昵称、签名靠右跟着头像 */
.chatdlm-profile-head {
    position: relative;
    padding: 12px 120px 16px 24px;
    min-height: 60px;
    text-align: right;
}

.chatdlm-profile-avatar {
    position: absolute;
    right: 17px;
    top: -40px;
    width: 80px;
    height: 80px;
    border-radius: var(--chatdlm-avatar-radius);
    border: 3px solid var(--chatdlm-page-background);
    box-sizing: content-box;
    background-color: var(--chatdlm-layer-static);
}

.chatdlm-profile-name {
    font-size: 24px;
    line-height: 32px;
}

.chatdlm-profile-bio {
    margin-top: 4px;
    font-size: 16px;
    color: var(--chatdlm-text-secondary);
    min-height: 22px;
}

.chatdlm-profile-tabs {
    display: flex;
    border-bottom: var(--wk-line);
}

.chatdlm-profile-tab {
    flex: 1 1;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--chatdlm-text-secondary);
    cursor: pointer;
}

.chatdlm-profile-tab:hover {
    background-color: var(--chatdlm-layer-hover);
}

.chatdlm-profile-tab span {
    position: relative;
    line-height: 40px;
}

.chatdlm-profile-tab-selected {
    color: var(--chatdlm-text-primary);
}

.chatdlm-profile-tab-selected span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--chatdlm-brand);
}

.chatdlm-profile-body {
    padding: 24px 48px;
}

/* 贴图页的卡片：复用收藏页那一张，可点(三层：静止、悬停底色、按下)；图在标题上面，跟标题隔一行 */
.chatdlm-profile-card {
    cursor: pointer;
}

.chatdlm-profile-card:active {
    background-color: var(--chatdlm-layer-selected);
}

.chatdlm-profile-card-image {
    margin-bottom: 10px;
}

/* 快搜：一列居中(最宽 640)；没搜时字标和搜索框在中间偏上，搜了以后搜索框到顶、结果接在下面。
   搜索框、结果卡片、「全网 · N 条」小标题都是收藏那一套，这里只管摆放 */
.chatdlm-kuaisou > * {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
.chatdlm-kuaisou-logo {
    margin-top: 18vh;
    margin-bottom: 24px;
    text-align: center;
}
.chatdlm-kuaisou-logo svg {
    width: auto;
    height: 48px;
    fill: var(--chatdlm-text-primary);
}
.chatdlm-kuaisou-search {
    display: flex;
}
/* 收藏里搜索框底下是灰的左栏，这里底下是页面：搜索框改用卡片那一层的底色，跟下面的结果卡片一个层级 */
.chatdlm-kuaisou-search .chatdlm-search-box {
    background-color: var(--chatdlm-layer-static);
}
.chatdlm-kuaisou-channels {
    margin-top: 12px;
}
.chatdlm-kuaisou-results {
    margin-top: 16px;
}
.chatdlm-kuaisou-more {
    padding: 4px 0 16px;
    text-align: center;
}
.chatdlm-kuaisou-results .chatdlm-favorites-card {
    margin-left: 0;
    margin-right: 0;
}

/* 左栏：与通讯录/发现同色同边线 */
.chatdlm-favorites {
    width: 100%;
    height: 100%;
    background-color: var(--chatdlm-list-background);
    border-right: var(--wk-line);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* 搜索行：与会话列表的搜索行同高同内边距，可拖动窗口 */
.chatdlm-favorites-search {
    height: var(--wk-height-chat-search);
    padding: 0 12px 0 16px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    -webkit-app-region: drag;
}

.chatdlm-favorites-search > * {
    -webkit-app-region: no-drag;
}

/* 「写笔记」：通栏灰底按钮，高 32(微信实测 48 像素)，图标+字居中；三层 */
.chatdlm-favorites-note-button-box {
    padding: 0 12px 8px 16px;
    flex-shrink: 0;
}

.chatdlm-favorites-note-button {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--chatdlm-icon-button-radius);
    background-color: var(--chatdlm-search-background);
    color: var(--chatdlm-text-primary);
    font-size: 14px;
    cursor: pointer;
}

.chatdlm-favorites-note-button:hover {
    background-color: var(--chatdlm-list-item-hover);
}

.chatdlm-favorites-note-button:active {
    background-color: var(--chatdlm-layer-selected);
}

/* 分类行：通栏、高 48(微信实测 72 像素)，图标 20 距左 18，文字距左 53，同发现页列 */
.chatdlm-favorites-list {
    flex: 1 1;
    overflow-y: auto;
}

.chatdlm-favorites .wk-iconlistitem {
    height: 48px;
    padding: 0;
}

.chatdlm-favorites .wk-iconlistitem-content {
    border-radius: 0;
}

.chatdlm-favorites .wk-iconlistitem-content-icon {
    width: 53px;
    padding-left: 18px;
}

.chatdlm-favorites-divider {
    height: 1px;
    margin: 8px 0 8px 18px;
    background-color: var(--chatdlm-layer-line);
}

/* 右栏：标题同会话头部高(变量)；卡片区左右留 40(微信实测 60 像素) */
.chatdlm-favorites-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--chatdlm-page-background);
    color: var(--chatdlm-text-primary);
}

/* 高度跟聊天头部、第三栏头部同一个变量：三栏的底线在一条线上(2026-11-10 用户报「这线没对齐」) */
.chatdlm-favorites-content-header {
    height: var(--wk-height-chat-conversation-header);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-left: 24px;
    font-size: var(--chatdlm-chat-title-font-size);
    border-bottom: var(--wk-line);
    box-sizing: border-box;
    -webkit-app-region: drag;
}

/* 卡片列表自己滚(悬浮滚动条照用法要求子元素自带 overflow-y)：标题一直在上面，多选操作栏一直在下面 */
.chatdlm-favorites-content > .chatdlm-scroll-area {
    flex: 1 1;
    min-height: 0;
    height: auto;
}

.chatdlm-favorites-cards {
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 12px 40px 24px;
}

.chatdlm-favorites-empty {
    padding-top: 80px;
    text-align: center;
    font-size: 14px;
    color: var(--chatdlm-text-secondary);
}

/* 2026-11-10 写笔记：头部右边放「导出全部」「回收站」(按钮照设置里的 .chatdlm-settings-button)；笔记卡片能点开、能按住拖出 */
.chatdlm-favorites-content-header-title {
    flex: 1 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chatdlm-favorites-content-header-actions {
    display: flex;
    gap: 8px;
    padding-right: 24px;
    -webkit-app-region: no-drag;
}

.chatdlm-favorites-content-header-actions .chatdlm-settings-button {
    height: 28px;
    padding: 0 12px;
    white-space: nowrap;
}

/* 2026-11-10 收藏当笔记本用：搜索行照助理页(右边有「⊕」，搜索框照会话页留 10px)；邮件页借这一行、右边没有「⊕」，就不留 */
.chatdlm-favorites-search .chatdlm-search-box-input:not(:last-child) {
    margin-right: 10px;
    min-width: 0;
}

/* 搜索结果分两段：「我的 · N 条」「全网 · N 条」(12px 更弱一档字色，照弹出框小标题)；段里没有东西时一行灰字 */
.chatdlm-favorites-section {
    margin: 6px 0 8px;
    font-size: 12px;
    color: var(--chatdlm-text-tertiary);
}

.chatdlm-favorites-section-empty {
    padding: 4px 0 16px;
    font-size: 14px;
    color: var(--chatdlm-text-tertiary);
}

/* 底下的多选操作栏：跟聊天多选那条同高、同底色(输入区高度那个变量) */
.chatdlm-favorites-multiplepanel {
    flex-shrink: 0;
    height: var(--wk-conversation-footer);
    border-top: var(--wk-line);
    background-color: var(--wk-color-secondary);
}


/* 助理：左栏照会话页一模一样的结构(.wk-chat-content-left / .wk-chat-search / .wk-chat-conversation-list + 浮动滚动条)，行复用会话列表；这里只补几样 */

/* 搜索框是能直接打字的那种(收藏页同款)，它默认右边不留空；这里右边有加号，照会话页留 10px */
.chatdlm-assistant .chatdlm-search-box-input {
    position: relative;
    margin-right: 10px;
    min-width: 0;
}

/* 输入框盖在整个搜索框上(左边让出放大镜：内边距 10 + 图标 16 + 间距 6 = 32)，框里的「搜索」二字跟会话页是同一个元素 */
.chatdlm-assistant-search-field {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 32px;
    right: 32px; /* 右边让出搜索框的 ×(SearchBoxClear) */
    width: auto;
}

/* 角色头像：会话头像同尺寸同圆角(.wk-avatar，--chatdlm-list-avatar-size)，主色底、主色上的字色画图标(深色主题主色会变，字色跟着变) */
.chatdlm-assistant-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--chatdlm-brand);
    color: var(--chatdlm-on-brand);
}

/* 右栏空白处：灰色站标下面一句说明 */
.chatdlm-assistant-empty {
    flex-direction: column;
}

.chatdlm-assistant-empty-tip {
    margin-top: 24px;
    font-size: 14px;
    color: var(--chatdlm-text-tertiary);
}


/* 选中行的底就是主色：头像反过来(主色上的字色底、主色图标)，不跟底混在一起 */
.wk-conversationlist-item-selected .chatdlm-assistant-avatar {
    background-color: var(--chatdlm-on-brand);
    color: var(--chatdlm-brand);
}

/* 添加新助理(照微信小程序页)：每组一张灰底圆角卡片，组名在左上；角色一排排，方形圆角头像 56px + 名字 */
.chatdlm-assistant-catalog-card {
    margin-top: 24px;
    padding: 20px 16px 12px;
    border-radius: var(--chatdlm-bubble-radius);
    background-color: var(--chatdlm-layer-static);
}

.chatdlm-assistant-catalog-title {
    padding-left: 8px;
    font-size: 16px;
    color: var(--chatdlm-text-secondary);
}

.chatdlm-assistant-catalog-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, 96px);
    grid-gap: 4px 8px;
    gap: 4px 8px;
}

/* 可点三层：静止透明 / 悬停一档灰 / 按下再深一档 */
.chatdlm-assistant-catalog-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0 6px;
    border-radius: var(--chatdlm-bubble-radius);
    cursor: pointer;
}

.chatdlm-assistant-catalog-item:hover {
    background-color: var(--chatdlm-layer-hover);
}

.chatdlm-assistant-catalog-item:active {
    background-color: var(--chatdlm-layer-selected);
}

.chatdlm-assistant-catalog-avatar {
    width: 56px;
    height: 56px;
    border-radius: var(--chatdlm-avatar-radius);
}

.chatdlm-assistant-catalog-name {
    margin-top: 8px;
    font-size: 14px;
    color: var(--chatdlm-text-primary);
}

.chatdlm-assistant-catalog-state {
    height: 16px;
    font-size: 12px;
    line-height: 16px;
    color: var(--chatdlm-text-tertiary);
}

/* 登录页(客户端自己画，照色板；可点元素三层)。
   页面：页面底色，顶部 32px 可拖动，右上角语言、设置；中间一张 440 宽的卡(比微信的 280 宽)。 */
.chatdlm-login {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--chatdlm-page-background);
    color: var(--chatdlm-text-primary);
    overflow: auto;
}

/* 顶条：整条可拖动窗口，右上角两个钮不参与拖动；右边给系统窗口按钮让位 */
/* 顶条：就是全站顶条(.chatdlm-title-strip，32px、能拖窗口、按钮 46×32)，登录页底色透明；网页版也留这一条(放语言) */
.chatdlm-title-strip.chatdlm-login-topbar {
    width: 100%;
    height: 32px;
    background-color: transparent;
    overflow: visible; /* 语言下拉从这条下面伸出来 */
}

/* 语言按钮带字：宽度跟着字走，其余跟顶条按钮一样 */
.chatdlm-title-strip-button.chatdlm-login-language-button {
    width: auto;
    padding: 0 12px;
    gap: 6px;
    font-size: 12px;
}

/* 语言下拉：实底、线、圆角 */
.chatdlm-login-language {
    position: relative;
}

.chatdlm-login-language-menu {
    position: absolute;
    top: 32px;
    right: 0;
    min-width: 120px;
    padding: 6px 0;
    border-radius: var(--chatdlm-icon-button-radius);
    background-color: var(--chatdlm-layer-static);
    border: 1px solid var(--chatdlm-layer-line);
    z-index: 2;
}

.chatdlm-login-language-item {
    padding: 8px 16px;
    font-size: 14px;
    color: var(--chatdlm-text-primary);
    cursor: pointer;
}

.chatdlm-login-language-item:hover {
    background-color: var(--chatdlm-layer-hover);
}

.chatdlm-login-language-item-selected,
.chatdlm-login-language-item-selected:hover {
    color: var(--chatdlm-brand);
}

/* 卡：440 宽，垂直居中 */
.chatdlm-login-card {
    width: 440px;
    margin: auto 0;
    padding: 32px 48px 40px;
    box-sizing: border-box;
}

/* 站标：通搜的匿名头像，主色(CSS mask 只取形状，颜色跟主题走)；ChatDLM 字 24；口号 14 次级色 */
.chatdlm-login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 32px;
}

.chatdlm-login-logo {
    width: 72px;
    height: 72px;
    background-color: var(--chatdlm-brand);
    /* 形状来自 App.css 的 .chatdlm-logo-mark（站标的唯一一份），这里只定大小和颜色 */
}

.chatdlm-login-name {
    margin-top: 16px;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    letter-spacing: 1px;
}

.chatdlm-login-slogan {
    margin-top: 6px;
    font-size: 14px;
    color: var(--chatdlm-text-secondary);
}

/* 输入框：44 高、灰底、无边、聚焦主色一圈；右侧可放一个 32 方块钮(显示密码) */
.chatdlm-login-field {
    position: relative;
    margin-bottom: 14px;
}

.chatdlm-login-input {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    padding: 0 14px;
    border: none;
    outline: none;
    border-radius: var(--chatdlm-icon-button-radius);
    background-color: var(--chatdlm-layer-static);
    color: var(--chatdlm-text-primary);
    font-size: 15px;
    font-family: inherit;
}

.chatdlm-login-field .chatdlm-login-input {
    padding-right: 48px;
}

.chatdlm-login-input::-moz-placeholder {
    color: var(--chatdlm-text-tertiary);
}

.chatdlm-login-input::placeholder {
    color: var(--chatdlm-text-tertiary);
}

.chatdlm-login-input:hover {
    background-color: var(--chatdlm-layer-hover);
}

.chatdlm-login-input:focus {
    box-shadow: 0 0 0 1px var(--chatdlm-brand) inset;
}

.chatdlm-login-field-action {
    position: absolute;
    right: 6px;
    top: 6px;
}

/* 记住密码 / 自动登录 / 找回密码 一行 */
.chatdlm-login-options {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 4px 0 20px;
    font-size: 13px;
    color: var(--chatdlm-text-secondary);
}

.chatdlm-login-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.chatdlm-login-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--chatdlm-brand);
    cursor: pointer;
}

.chatdlm-login-options .chatdlm-login-link {
    margin-left: auto;
}

.chatdlm-login-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--chatdlm-brand);
    cursor: pointer;
    border-radius: var(--chatdlm-icon-button-radius);
    padding: 2px 4px;
}

.chatdlm-login-link:hover {
    background-color: var(--chatdlm-layer-hover);
}

/* 主按钮：通栏 44、主色底、三层 */
.chatdlm-login-submit {
    width: 100%;
    height: 44px;
    border: none;
    border-radius: var(--chatdlm-icon-button-radius);
    background-color: var(--chatdlm-brand);
    color: var(--chatdlm-on-brand);
    font-size: 16px;
    font-family: inherit;
    cursor: pointer;
}

.chatdlm-login-submit:hover {
    filter: brightness(1.08);
}

.chatdlm-login-submit:active {
    filter: brightness(0.94);
}

.chatdlm-login-submit:disabled {
    opacity: .7;
    cursor: default;
    filter: none;
}

.chatdlm-login-submit-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.chatdlm-login-submit-loading .chatdlm-theme-icon,
.chatdlm-login-entering-status .chatdlm-theme-icon {
    animation: chatdlm-login-spin 1s linear infinite;
}

@keyframes chatdlm-login-spin {
    to { transform: rotate(360deg); }
}

/* 底部链接：注册账号 | 扫码登录 */
.chatdlm-login-footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    font-size: 13px;
}

.chatdlm-login-footer-divider {
    width: 1px;
    height: 12px;
    background-color: var(--chatdlm-layer-line);
}

/* 扫码登录：220 的码放在 240 的白底方块里(深色下也要白底，码才扫得出) */
.chatdlm-login-qrcode {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chatdlm-login-qrcode-box {
    position: relative;
    width: 240px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--chatdlm-bubble-radius);
    background-color: var(--chatdlm-fixed-white);
    overflow: hidden;
}

.chatdlm-login-qrcode-cover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--chatdlm-fixed-white);
    opacity: .96;
    color: var(--chatdlm-fixed-near-black);
    font-size: 14px;
}

.chatdlm-login-qrcode-cover img {
    width: 72px;
    height: 72px;
    border-radius: var(--chatdlm-avatar-radius);
}

.chatdlm-login-qrcode-expired {
    cursor: pointer;
}

.chatdlm-login-qrcode-title {
    margin-top: 20px;
    font-size: 16px;
}

.chatdlm-login-qrcode-tip {
    margin-top: 6px;
    font-size: 13px;
    color: var(--chatdlm-text-secondary);
}

/* 登录成功「正在进入」：头像 72 圆角方 + 名字 + 转圈 */
.chatdlm-login-entering {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 0;
}

.chatdlm-login-entering-avatar {
    width: 72px;
    height: 72px;
    border-radius: var(--chatdlm-avatar-radius);
    background-color: var(--chatdlm-layer-static);
}

.chatdlm-login-entering-name {
    margin-top: 16px;
    font-size: 18px;
}

.chatdlm-login-entering-status {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--chatdlm-brand);
}

/* 网络代理设置：返回钮 + 标题；使用代理一行；四个字段；保存 */
.chatdlm-login-proxy-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.chatdlm-login-proxy-title {
    font-size: 18px;
}

.chatdlm-login-proxy-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 49px;
    border-bottom: var(--wk-line);
    font-size: 15px;
    margin-bottom: 16px;
}

.chatdlm-login-proxy-field {
    margin-bottom: 14px;
}

.chatdlm-login-proxy-label {
    font-size: 12px;
    color: var(--chatdlm-text-secondary);
    margin-bottom: 6px;
}

.chatdlm-login-proxy .chatdlm-login-submit {
    margin-top: 8px;
}

.chatdlm-login .semi-switch-checked {
    background-color: var(--chatdlm-brand);
}