koishi-plugin-chat-patch 3.0.2 → 5.0.0

package/client/web/src/assets/css/chat.css

@@ -0,0 +1,2104 @@
+textarea {
+    caret-color: var(--color-main);
+}
+input {
+    outline: none;
+}
+
+.chat-pan {
+    background-color: var(--color-card);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+
+    color: var(--color-font);
+    flex-direction: column;
+    pointer-events: none;
+    transition: all 0.3s;
+    position: absolute;
+    overflow: hidden;
+    display: flex;
+    height: 100%;
+    left: 371px;
+    z-index: 2;
+    right: 0;
+    top: 0;
+}
+.chat-pan.withBar {
+    height: calc(100% - 40px);
+    top: 40px;
+}
+.chat-pan.full {
+    height: 100%;
+    z-index: 20;
+    bottom: 0;
+    left: 0;
+}
+.chat-pan > div {
+    z-index: 2;
+}
+.chat-pan > div.bg {
+    background: rgba(var(--color-card-rgb), 0.6);
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    z-index: 0;
+}
+.chat-pan > div.info {
+    background: rgba(var(--color-card-1-rgb), 0.8);
+    box-shadow: 0 0 1px var(--color-shader);
+    backdrop-filter: blur(50px);
+    width: calc(100% - 60px);
+    pointer-events: all;
+    align-items: center;
+    border-radius: 7px;
+    display: flex;
+    padding: 15px;
+    margin: 15px;
+}
+.chat-pan > div.info > svg {
+    background: var(--color-main);
+    color: var(--color-font-r);
+    margin-right: 10px;
+    border-radius: 7px;
+    cursor: pointer;
+    padding: 15px;
+    display: none;
+    height: 20px;
+    width: 20px;
+}
+.chat-pan > div.info > svg.back {
+    background: rgba(var(--color-card-2-rgb), 0.8);
+    display: block !important;
+    color: var(--color-font);
+}
+.chat-pan > div.info > img {
+    border: 2px solid var(--color-card-2);
+    border-radius: 7px;
+    margin-right: 10px;
+    object-fit: cover;
+    height: 50px;
+    width: 50px;
+}
+.chat-pan > div.info > div.info p {
+    font-weight: bold;
+    font-size: 1rem;
+    margin: 0;
+}
+.chat-pan > div.info > div.info span {
+    font-size: 0.8rem;
+    font-weight: 100;
+    margin-top: 3px;
+    display: block;
+}
+.chat-pan > div.info > div.space {
+    flex: 1;
+}
+.chat-pan > div.info > div.more {
+    background: var(--color-card-2);
+    border-radius: 50%;
+    cursor: pointer;
+    height: 45px;
+    width: 45px;
+}
+.chat-pan > div.info > div.more > svg {
+    color: var(--color-main);
+    margin: 10px;
+    height: 25px;
+    width: 25px;
+}
+
+.chat-pan > div.chat {
+    max-width: calc(100% - 20px);
+    width: calc(100% - 20px);
+    pointer-events: all;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    scrollbar-gutter: stable;
+    margin: -90px 0 20px 20px;
+    padding-top: 90px;
+    z-index: 1;
+    flex: 1;
+}
+.chat-padding {
+    display: block;
+}
+.chat-pan > div.chat > div:last-child {
+    height: calc(100% - var(--safe-area-bottom));
+}
+.chat-pan > div.chat::-webkit-scrollbar {
+    background: transparent;
+}
+
+.chat-pan > div.new-msg {
+    transform: translateY(calc(-100% - 70px));
+    margin: 0 20px -25px auto;
+    border-right: 7px solid transparent;
+    border-radius: 50px 0 0 50px;
+    pointer-events: all;
+    cursor: pointer;
+    height: 50px;
+    z-index: 2;
+}
+.chat-pan > div.new-msg > div {
+    background: rgba(var(--color-card-1-rgb), 0.7);
+    backdrop-filter: blur(50px);
+    justify-content: center;
+    border-radius: 40px;
+    align-items: center;
+    margin-right: -7px;
+    margin-top: 10px;
+    display: flex;
+    height: 100%;
+    padding: 0;
+}
+.chat-pan > div.new-msg > div > svg {
+    color: var(--color-font);
+    padding: 16px;
+    height: 17px;
+    width: 17px;
+}
+.chat-pan > div.new-msg > div > span {
+    margin-right: 20px;
+    margin-left: -5px;
+}
+.chat-pan > div.more {
+    background: rgba(var(--color-card-rgb), 0.1);
+    transition: background 0.3s;
+    pointer-events: all;
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+}
+.chat-pan > div.more > div:nth-child(2) {
+    align-items: end;
+    display: flex;
+    padding: 20px;
+}
+.chat-pan > div.more > div:nth-child(2) > div {
+    background: var(--color-card-1);
+    border-radius: 7px;
+}
+.chat-pan > div.more > div:nth-child(2) > div:first-child {
+    margin-right: 20px;
+    cursor: pointer;
+    height: 50px;
+    width: 50px;
+}
+.chat-pan > div.more > div:nth-child(2) > div:first-child > svg {
+    color: var(--color-font-1);
+    margin: 15px;
+    height: 20px;
+    width: 20px;
+}
+.chat-pan > div.more > div:nth-child(2) > div:nth-child(2) {
+    align-items: center;
+    display: flex;
+    flex: 1;
+}
+.chat-pan > div.more > div:nth-child(2) > div:nth-child(2) > form {
+    align-items: center;
+    display: flex;
+    flex: 1;
+}
+.chat-pan > div.more > div:nth-child(2) > div > form {
+    width: 100%;
+}
+.chat-pan > div.more > div:nth-child(2) > div > form > input {
+    padding-top: 0 !important;
+    height: 50px !important;
+    margin: 0 !important;
+}
+.chat-pan > div.more > div:nth-child(2) > div > form > input,
+.chat-pan > div.more > div:nth-child(2) > div > form > textarea {
+    width: calc(100% - 40px);
+    color: var(--color-font);
+    background: transparent;
+    border-radius: 7px;
+    font-size: 0.85rem;
+    line-height: 20px;
+    max-height: 40vh;
+    min-height: 20px;
+    padding: 0 20px;
+    margin: 10px 0;
+    height: 20px;
+    resize: none;
+    border: 0;
+}
+.chat-pan > div.more > div:nth-child(2) > div > form > input:disabled,
+.chat-pan > div.more > div:nth-child(2) > div > form > textarea:disabled {
+    background: var(--color-card);
+    outline: 1px solid var(--color-card-2);
+    color: var(--color-font-2);
+    opacity: 0.7;
+    text-align: center;
+    font-size: 0.8rem;
+}
+.chat-pan > div.more > div:nth-child(2) > div > div {
+    border-radius: 7px;
+    cursor: pointer;
+    height: 40px;
+    margin: 5px;
+    width: 40px;
+}
+.chat-pan > div.more > div:nth-child(2) > div > div:hover {
+    background: var(--color-card-2);
+}
+.chat-pan > div.more > div:nth-child(2) > div svg {
+    color: var(--color-font-1);
+    width: 20px;
+    height: 20px;
+    margin: 10px;
+}
+.chat-pan > div.loading {
+    background: var(--color-card-1);
+    margin: -10px 15px 15px 15px;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.3s;
+    border-radius: 7px;
+    overflow: hidden;
+    display: flex;
+    padding: 0;
+    height: 0;
+}
+.chat-pan > div.loading.show {
+    height: unset;
+    padding: 10px;
+}
+@-webkit-keyframes rotate {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+@keyframes rotate {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+.chat-pan > div.loading svg {
+    animation: rotate 1.5s linear infinite;
+    color: var(--color-font);
+    margin-right: 5px;
+    margin-top: 2px;
+    height: 0.9rem;
+}
+
+.sys-not-pan {
+    text-align: center;
+    padding: 20px;
+    display: flex;
+}
+.sys-not-pan > div {
+    padding-right: 10px;
+    pointer-events: all;
+    overflow-y: scroll;
+}
+.sys-not-pan > div:first-child {
+    background: var(--color-card-1);
+    align-items: center;
+    border-radius: 7px;
+    display: flex;
+    padding: 10px 20px;
+}
+.sys-not-pan > div:first-child > svg {
+    color: var(--color-font);
+    margin-right: 20px;
+    cursor: pointer;
+    height: 1.1rem;
+}
+.sys-not-pan > div:first-child > span {
+    font-size: 1rem;
+}
+
+.sys-not-list {
+    margin-top: 10px;
+}
+.sys-not-list > div {
+    background: var(--color-card-1);
+    margin-bottom: 10px;
+    border-radius: 7px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 10px;
+}
+.sys-not-list > div > div:first-child {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex: 1;
+}
+.sys-not-list > div > div:first-child img {
+    width: 50px;
+    height: 50px;
+    border-radius: 7px;
+    border: 2px solid var(--color-card-2);
+    margin-right: 10px;
+}
+.sys-not-list > div > div:first-child div {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    text-align: left;
+}
+.sys-not-list > div > div:first-child span {
+    color: var(--color-main);
+    font-weight: bold;
+}
+.sys-not-list > div > div:first-child a {
+    color: var(--color-font);
+    font-size: 0.9rem;
+}
+.sys-not-list > div > div:first-child a:last-child {
+    color: var(--color-font-2);
+}
+.sys-not-list > div > div:last-child button {
+    margin-right: 10px;
+    width: 90px;
+    height: 35px;
+    font-size: 0.9rem;
+}
+.sys-not-list > div > div:last-child button:first-child {
+    background: var(--color-card-2);
+    color: var(--color-font-1);
+}
+
+.more-detail {
+    transition: height 0.3s;
+    overflow: hidden;
+    display: flex;
+    margin-top: 0;
+    width: 100%;
+    height: 0;
+}
+.more-detail.show {
+    padding-top: 20px;
+    display: flex;
+    height: 50px;
+    width: 100%;
+}
+.more-detail > div {
+    background: var(--color-card-1);
+    border-radius: 7px;
+    margin: 0 10px;
+    cursor: pointer;
+    height: 50px;
+    width: 50px;
+}
+.more-detail > div.space {
+    background: transparent !important;
+    flex: 1;
+}
+.more-detail > div:first-child {
+    margin-left: 20px;
+}
+.more-detail > div:last-child {
+    margin-right: 20px;
+}
+.more-detail > div > svg {
+    color: var(--color-font-1);
+    margin: 15px;
+    height: 20px;
+    width: 20px;
+}
+
+.msg-menu {
+	pointer-events: none;
+    position: absolute;
+    overflow: hidden;
+    height: calc(100% - var(--safe-area-bottom)) !important;
+    top: 0;
+    width: 100%;
+    z-index: 30;
+}
+.msg-menu.withBar {
+    height: calc(100% + 40px);
+    margin-top: -40px;
+}
+.msg-menu-bg {
+    pointer-events: all;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+}
+
+.merge-pan {
+    --merge-pan-width: 400px;
+
+    align-items: stretch;
+    flex-direction: row;
+    position: absolute;
+    display: flex;
+    height: 100%;
+    width: 100%;
+}
+.merge-pan.show {
+    pointer-events: all;
+}
+.merge-pan > div:first-child {
+    background: var(--color-card-2);
+    transition: background 0.5s;
+    opacity: 0;
+    flex: 1;
+}
+.merge-pan.show > div:first-child {
+    opacity: 0.7;
+}
+.merge-pan > div:last-child {
+    transition: transform 0.3s ease;
+    transform: translateX(100%);
+    overflow: hidden;
+    min-width: unset;
+    padding: 0;
+    flex-direction: column;
+    display: flex;
+    width: var(--merge-pan-width);
+}
+.merge-pan.show > div:last-child {
+    transform: translateX(0);
+}
+.merge-pan > div:last-child > div:first-child {
+    align-items: center;
+    display: flex;
+    padding: 20px;
+}
+.merge-pan > div:last-child > div:first-child span {
+    white-space: nowrap;
+    margin-left: 15px;
+    font-size: 1rem;
+    flex: 1;
+}
+.merge-pan > div:last-child > div:first-child svg {
+    color: var(--color-font);
+    cursor: pointer;
+    height: 1.5rem;
+}
+.merge-pan > div:last-child > div:last-child {
+    margin: 0 10px 10px 10px;
+    overflow-y: scroll;
+    flex: 1;
+}
+.merge-pan .loading {
+    transform: translateY(50%);
+    flex-direction: column;
+    align-items: center;
+    display: none;
+    height: 100%;
+    width: 100%;
+}
+.merge-pan .loading > svg {
+    animation: rotate 1.5s linear infinite;
+    color: var(--color-main);
+    width: 2rem;
+    height: 2rem;
+}
+.merge-pan .loading > span {
+    color: var(--color-main);
+    margin-top: 10px;
+}
+.merge-pan .loading.show {
+    display: flex;
+}
+
+.custom-face-tooltip,
+.member-info {
+    width: fit-content;
+    pointer-events: none;
+
+    transform: translate(-20px, calc(-100% - 0.8rem));
+    box-shadow: 0 0 5px var(--color-shader);
+    background: rgba(var(--color-card-2-rgb), 0.75);
+    border: 1px solid var(--color-card-2);
+    backdrop-filter: blur(15px);
+    padding: 10px 20px 10px 10px;
+    overflow: hidden;
+    max-width: 55%;
+    max-height: calc(100% - var(--safe-area-bottom));
+}
+.member-info span,
+.member-info a {
+    color: var(--color-font);
+}
+
+.member-info > div:nth-child(1) {
+    display: flex;
+}
+.member-info > div:nth-child(1) > img {
+    outline: 2px solid var(--color-main);
+    border-radius: 7px;
+    height: 60px;
+    width: 60px;
+}
+.member-info > div:nth-child(1) > div {
+    margin-left: 20px;
+    overflow: hidden;
+    flex: 1;
+}
+.member-info > div:nth-child(1) > div > span {
+    color: var(--color-font-1);
+    font-size: 0.9rem;
+    white-space: nowrap;
+}
+.member-info > div:nth-child(1) > div > span[name='id'] {
+    font-size: 0.8rem;
+    display: block;
+    opacity: 0.7
+}
+.member-info > div:nth-child(1) > div > div {
+    margin-bottom: 5px;
+    flex-wrap: wrap;
+    display: flex;
+}
+.member-info > div:nth-child(1) > div > div > a {
+    text-overflow: ellipsis;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    margin-right: 10px;
+    font-weight: bold;
+    font-size: 1rem;
+    display: block;
+}
+.member-info > div:nth-child(1) > div > div > div {
+    margin-top: 4px;
+}
+/* 群成员下边区域 */
+.member-info > div:nth-child(2).member {
+    display: flex;
+    margin-top: 10px;
+    align-items: center;
+}
+.member-info > div:nth-child(2).member > :nth-child(1) {
+    width: 60px;
+    display: block;
+    font-size: 13px;
+}
+.member-info > div:nth-child(2).member > :nth-child(2) {
+    margin-left: 20px;
+}
+
+
+.custom-face-tooltip {
+    padding: 0;
+    border: 2px solid var(--color-main);
+    max-width: 90vw;
+    max-height: 35vh;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    transform: translate(-50%, calc(-100% - 0.8rem)) scale(0.5);
+    transform-origin: bottom;
+    border-radius: 7px;
+}
+
+
+.chat-info-pan {
+    pointer-events: all;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+}
+.chat-info-float-enter-active,
+.chat-info-float-leave-active {
+    transition: none;
+}
+.chat-info-float-enter-active .chat-info {
+    animation: chatInfoPanelSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    animation-fill-mode: both;
+}
+.chat-info-float-leave-active .chat-info {
+    animation: chatInfoPanelSlideDown 0.2s cubic-bezier(0.4, 0, 0.6, 1);
+    animation-fill-mode: both;
+}
+.chat-info {
+    overflow: hidden;
+    margin: 50vh 0 0 50%;
+    box-shadow: 0 0 10px var(--color-shader);
+    transform: translate(-50%, -50%);
+    flex-direction: column;
+    position: absolute;
+    min-width: 400px;
+    max-height: 80%;
+    display: flex;
+    width: 50%;
+    z-index: 1;
+}
+
+@keyframes chatInfoPanelSlideUp {
+    from {
+        transform: translate(-50%, -20%) scale(0.95);
+        opacity: 0;
+    }
+
+    to {
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 1;
+    }
+}
+
+@keyframes chatInfoPanelSlideDown {
+    from {
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 1;
+    }
+
+    to {
+        transform: translate(-50%, -5%) scale(0.98);
+        opacity: 0;
+    }
+}
+
+.chat-info header {
+    letter-spacing: 0;
+}
+.chat-info > header {
+    margin-bottom: 5px;
+    display: flex;
+}
+.chat-info > header > span {
+    white-space: nowrap;
+    font-size: 1rem;
+    flex: 1;
+}
+.chat-info > header > svg {
+    color: var(--color-font);
+    cursor: pointer;
+    height: 1.5rem;
+}
+.chat-info-base {
+    background: var(--color-card-1);
+    border-radius: 7px;
+    margin: 0 10px;
+    padding: 20px;
+}
+.chat-info-base.user {
+    background: transparent;
+    margin: 0;
+}
+.chat-info-base > div:first-child {
+    background: var(--color-card-2);
+    border-radius: 7px 7px 0 0;
+    width: calc(100% + 20px);
+    align-items: center;
+    margin-left: -20px;
+    margin-top: -20px;
+    display: flex;
+    padding: 10px;
+}
+.chat-info-base.user > div:first-child {
+    background: var(--color-card-1);
+    border-radius: 7px;
+}
+.chat-info-base > div:first-child > img {
+    border: 2px solid var(--color-card-1);
+    outline: 2px solid var(--color-main);
+    border-radius: 7px;
+    height: 40px;
+    width: 40px;
+}
+.chat-info-base > div:first-child > div:nth-child(2) {
+    flex-direction: column;
+    margin-left: 20px;
+    display: flex;
+    flex: 1;
+}
+.chat-info-base > div:first-child > div:nth-child(2) > a {
+    color: var(--color-font);
+    font-weight: bold;
+    font-size: 1rem;
+}
+.chat-info-base > div:first-child > div:nth-child(2) > span {
+    color: var(--color-font-1);
+}
+.chat-info-base > div:first-child > div:nth-child(3) {
+    background: var(--color-card-2);
+    border-radius: 100%;
+    padding: 15px;
+    height: 20px;
+    width: 20px;
+}
+.chat-info-base > div:first-child > div:nth-child(3) > svg {
+    color: var(--color-font);
+}
+.chat-info-base > div:last-child {
+    padding: 0 10px;
+}
+.chat-info-base > div:last-child > header {
+    color: var(--color-main);
+    padding-bottom: 5px;
+    font-size: 0.9rem;
+    margin-top: 10px;
+}
+.chat-info-base > div:last-child > div.tags {
+    align-items: center;
+    margin-top: 10px;
+    flex-wrap: wrap;
+    display: flex;
+}
+.chat-info-base > div:last-child > div.tags > div {
+    background: var(--color-main);
+    color: var(--color-font-r);
+    margin: 5px 5px 0 5px;
+    border-radius: 1rem;
+    padding: 2px 10px;
+    font-size: 0.8rem;
+}
+.chat-info-base > div:last-child > div.admin {
+    align-items: center;
+    flex-wrap: wrap;
+    display: flex;
+}
+.chat-info-base > div:last-child > div.admin > img {
+    border: 2px solid var(--color-card-2);
+    border-radius: 100%;
+    margin: 0 3px 3px 0;
+    height: 35px;
+}
+.chat-info-base > div:last-child > div.outher > span {
+    display: block;
+}
+.chat-info-base > div:last-child > div.outher > span > span {
+    color: var(--color-font-1);
+}
+.chat-info-tab-member {
+    padding: 0 20px;
+}
+.chat-info-tab-member > div {
+    transition: background 0.3s;
+    align-items: center;
+    border-radius: 7px;
+    cursor: pointer;
+    display: flex;
+    padding: 10px;
+}
+.chat-info-tab-member > div:hover {
+    background: var(--color-card-1);
+}
+.chat-info-tab-member > div > img {
+    border-radius: 100%;
+    margin-right: 10px;
+    height: 30px;
+    width: 30px;
+}
+.chat-info-tab-member > div > div {
+    overflow: hidden;
+    align-items: center;
+    display: flex;
+    flex: 1;
+}
+.chat-info-tab-member > div > div > a {
+    color: var(--color-font);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 80%;
+    overflow: hidden;
+}
+.chat-info-tab-member > div > div > svg {
+    color: var(--color-main);
+    margin-left: 5px;
+    height: 0.8rem;
+}
+.chat-info-tab-member > div > span {
+    color: var(--color-font-2);
+    transition: all .2s;
+    opacity: 1;
+}
+.chat-info-tab-member > div.edit:hover > span {
+    transform: translateX(-10px);
+    opacity: 0;
+}
+.chat-info-tab-member > div > svg {
+    color: var(--color-font-2);
+    transition: all .2s;
+    margin-right: -25px;
+    margin-left: 10px;
+    width: 15px;
+    opacity: 0;
+}
+.chat-info-tab-member > div > svg:hover {
+    color: var(--color-main);
+}
+.chat-info-tab-member > div.edit:hover > svg {
+    margin-right: 5px;
+    display: block;
+    opacity: 1;
+}
+
+.chat-info-tab {
+    height: 100%;
+    overflow: hidden;
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+}
+.chat-info-tab > div:first-child {
+    min-height: 30px;
+}
+.chat-info-tab > div:first-child:hover {
+    box-shadow: unset;
+}
+.chat-info-tab .tab-bar {
+    --bc-tab-margin: 10px;
+    padding-left: 0;
+}
+.chat-info-tab .tab-body {
+    overflow-y: scroll;
+}
+
+.user-config {
+    display: flex;
+    flex-direction: column;
+    transition: all 0.3s;
+    transform: translateY(calc(100% + 20px));
+    box-shadow: 0 -3px 3px var(--color-shader);
+    background: var(--color-card);
+    position: absolute;
+    width: calc(100% - 30px);
+    margin-left: -15px;
+    height: auto;
+    top: 0;
+    bottom: 0;
+    margin-top: 50px;
+}
+.user-config.show {
+    transform: translateY(0);
+}
+.user-config:hover {
+    box-shadow: 0 -3px 3px var(--color-shader) !important;
+}
+
+.user-config > div:first-child {
+    background: var(--color-card-1);
+    border-radius: 7px 7px 0 0;
+    align-items: center;
+    padding: 15px 20px;
+    margin: -15px;
+    display: flex;
+}
+.user-config > div:first-child > img {
+    border-radius: 7px;
+    width: 35px;
+    border: 1px solid var(--color-card-2);
+    outline: 2px solid var(--color-main);
+}
+.user-config > div:first-child > svg {
+    cursor: pointer;
+    width: 17px;
+    height: 17px;
+}
+.user-config > div:first-child > div {
+    flex-direction: column;
+    margin-left: 10px;
+    display: flex;
+    flex: 1;
+}
+.user-config > div:first-child > div > a {
+    font-size: 0.9rem;
+}
+.user-config > div:first-child > div > span {
+    color: var(--color-font-2);
+    font-size: 0.8rem;
+}
+.user-config > div:last-child {
+    flex: 1;
+    overflow-y: scroll;
+    padding: 0 15px 0 20px;
+    margin-top: 25px;
+}
+.user-config > div:last-child > div:hover {
+    background: var(--color-card-1);
+}
+.user-config > div:last-child > header {
+    font-weight: normal;
+    font-size: 0.9rem;
+    padding: 10px 0 0 0;
+}
+.user-config > div:last-child > div:hover input {
+    background: var(--color-card-2);
+    transition: all 0.3s;
+}
+
+.user-config button {
+    width: calc(100% - 60px);
+    margin: 25px 30px 0 30px;
+}
+
+.bulletins {
+    padding: 0 20px;
+}
+.bulletins > div {
+    transition: background 0.3s;
+    border-radius: 7px;
+    padding: 10px 20px;
+}
+.bulletins > div:hover {
+    background: var(--color-card-1);
+}
+.bulletins > div.base {
+    cursor: pointer;
+}
+.bulletins > div.base > span {
+    background: var(--color-card-1);
+    margin-top: 10px;
+    border-radius: 7px;
+    text-align: center;
+    font-size: 0.8rem;
+    display: block;
+    padding: 5px;
+}
+.bulletins > div.base > header {
+    align-items: center;
+    display: flex;
+}
+.bulletins > div.base > header > svg {
+    color: var(--color-main);
+    margin-right: 10px;
+    margin-top: 2px;
+    height: 1.1rem;
+}
+.bulletins > div.base > header > span {
+    color: var(--color-main);
+    font-weight: bold;
+    font-size: 1rem;
+}
+.bulletins > div.base > header > span:last-child {
+    color: var(--color-font-2);
+    font-size: 0.8rem;
+    font-weight: normal;
+}
+.bulletins > div.base > div.body {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-height: 6rem;
+    display: flex;
+}
+.bulletins > div.base > div.body.all {
+    max-height: unset;
+    flex-flow: column;
+}
+.bulletins > div.base > div.body > .img {
+    height: 6rem;
+    width: 6rem;
+    object-fit: cover;
+    object-position: center;
+    border-radius: 7px;
+}
+.bulletins > div.base > div.body > .img.all {
+    margin-top: 1rem;
+    width: unset;
+    height: unset;
+}
+
+.bulletins > div.base > div.body > span {
+    white-space: pre-line;
+}
+.bulletins > div.base > div.body > span > a {
+    color: var(--color-main) !important;
+    font-weight: bold;
+    text-decoration: underline;
+    padding: 0 5px;
+    opacity: 0.8;
+}
+.bulletins > div.base > div.body > span > a:before {
+    text-align: center;
+    content: '🔗';
+    color: transparent;
+    text-shadow: 0 0 0 var(--color-font-1);
+}
+.bulletins > div.base > div.info {
+    background: var(--color-card-1);
+    transition: background 0.3s;
+    align-items: center;
+    border-radius: 7px;
+    padding: 10px 20px;
+    margin-top: 10px;
+    display: flex;
+}
+.bulletins > div.base:hover > div.info {
+    background: var(--color-card-2);
+}
+.bulletins > div.base > div.info > img {
+    outline: 2px solid var(--color-main);
+    border: 2px solid var(--color-card);
+    border-radius: 100%;
+    width: 20px;
+}
+.bulletins > div.base > div.info > a {
+    color: var(--color-main);
+    margin-left: 10px;
+    font-size: 0.9rem;
+}
+.bulletins > div.base > div.info > div {
+    flex: 1;
+}
+.bulletins > div.base > div.info > span {
+    color: var(--color-font-2);
+    font-size: 0.8rem;
+}
+
+.group-files {
+    padding: 0 10px;
+}
+.group-files > div > div {
+    transition: background 0.3s;
+    align-items: center;
+    border-radius: 7px;
+    flex-wrap: wrap;
+    padding: 10px;
+    display: flex;
+    margin: 5px;
+}
+.group-files > div > div.folder {
+    cursor: pointer;
+}
+.group-files > div > div.folder.open {
+    background: var(--color-card-1);
+}
+.group-files > div > div:hover {
+    background: var(--color-card-1);
+}
+.group-files > div > div > svg {
+    color: var(--color-font);
+    margin: 0 15px 0 10px;
+    height: 1.2rem;
+}
+.group-files > div > div > div.main {
+    margin-right: 20px;
+    flex: 1;
+}
+.group-files > div > div > div.main span {
+    overflow-wrap: anywhere;
+}
+.group-files > div > div > div.download {
+    background: var(--color-card-2);
+    border-radius: 100%;
+    cursor: pointer;
+    height: 1.9rem;
+    width: 1.9rem;
+}
+.group-files > div > div > div.download > svg {
+    color: var(--color-font);
+    height: 0.8rem;
+    margin: 10px;
+}
+.group-files > div > div > div > div > span {
+    color: var(--color-font-1);
+    font-size: 0.8rem;
+}
+.group-files > div > div > div > div > span:first-child {
+    color: var(--color-main);
+}
+.group-files > div > div > div > div > span::after {
+    color: var(--color-font-1);
+    content: '\2022';
+    margin-left: 5px;
+}
+.group-files > div > div > div > div > span:last-child::after {
+    content: '';
+}
+
+.info-pan-set {
+    padding: 0 20px;
+}
+.info-pan-set > div:hover {
+    background: var(--color-card-1) !important;
+}
+.info-pan-set > div > label.ss-switch {
+    --switch-dot-border: 5px;
+    --switch-dot-margin: 8px;
+    --switch-height: 25px;
+    min-width: 45px;
+    margin: 5px 0;
+}
+.info-pan-set > div > label.ss-switch > div {
+    background: var(--color-card-2);
+}
+.info-pan-set > div > label.ss-switch > div > div {
+    margin-top: 3px;
+}
+.info-pan-set > div > label.ss-switch input:checked ~ div {
+    background: var(--color-main);
+}
+
+.sub_file {
+    margin-top: 10px;
+    width: 100%;
+}
+/* .sub_file > div > div:hover {
+    background: var(--color-card-2);
+} */
+
+.img-sender {
+    pointer-events: all;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    left: 0;
+    top: 0;
+}
+.img-sender > div.bg {
+    background: var(--color-card-2);
+    height: 100%;
+    opacity: 0.7;
+    width: 100%;
+}
+.img-sender > div.card {
+    margin: calc(50vh - 75px) 0 0 50%;
+    transform: translate(-50%, -50%);
+    flex-direction: column;
+    position: absolute;
+    display: flex;
+    height: 50%;
+    width: 50%;
+    z-index: 1;
+}
+.img-sender > div.card > div.hander {
+    align-items: center;
+    display: flex;
+}
+.img-sender > div.card > div.hander > span {
+    font-weight: bold;
+    font-size: 1rem;
+    flex: 1;
+}
+.img-sender > div.card > div.hander > button {
+    width: 100px;
+}
+.img-sender > div.card > div.imgs {
+    margin-bottom: 20px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    margin-right: -7px;
+    margin-top: 10px;
+    height: 100%;
+}
+.img-sender > div.card > div.imgs::-webkit-scrollbar {
+    display: none;
+}
+.img-sender > div.card > div.imgs > div {
+    border: 2px solid var(--color-card-2);
+    border-radius: 7px;
+    margin-right: 9px;
+    margin-top: 10px;
+    padding: 10px;
+}
+.img-sender > div.card > div.imgs > div > img {
+    transform: translateX(-50%);
+    margin-bottom: 9px;
+    border-radius: 7px;
+    max-height: 30vh;
+    margin-left: 50%;
+    max-width: 100%;
+    margin-top: 5px;
+}
+.img-sender > div.card > div.imgs > div > div {
+    margin-bottom: calc(-20px - 1rem);
+    background: var(--color-card-2);
+    backdrop-filter: blur(10px);
+    height: calc(1rem + 15px);
+    width: calc(1rem + 15px);
+    justify-content: center;
+    border-radius: 100%;
+    align-items: center;
+    position: relative;
+    margin-right: 10px;
+    margin-top: 9px;
+    cursor: pointer;
+    display: flex;
+    float: right;
+    z-index: 1;
+}
+.img-sender > div.card > div.imgs > div > div > svg {
+    color: var(--color-font);
+    height: 1rem;
+}
+.img-sender > div.card > div.sender {
+    display: flex;
+}
+.img-sender > div.card > div.sender > input {
+    background: var(--color-card-1);
+    width: calc(100% - 20px);
+    border-radius: 7px;
+    padding: 0 10px;
+    height: 50px;
+    border: 0;
+    flex: 1;
+}
+.img-sender > div.card > div.sender > svg {
+    background: var(--color-card-1);
+    color: var(--color-font-1);
+    border-radius: 7px;
+    margin-right: 20px;
+    padding: 15px;
+    cursor: pointer;
+    height: 20px;
+    width: 20px;
+}
+
+.face-pan {
+    background: var(--color-card-1);
+    transform: translateY(-100%);
+    position: absolute;
+    margin-left: 20px;
+    height: 250px;
+    width: 300px;
+    padding: 0;
+}
+.face-pan div.tab-body > div {
+    overflow: hidden !important;
+}
+.fase-pan-tab > li > svg {
+    color: var(--color-font);
+    margin-top: 10px;
+    margin-left: 5px;
+    height: 1.1rem;
+    width: 1.1rem;
+}
+
+.face-pan .tab-bar {
+    --bc-tab-margin: 5px;
+    width: 100%;
+}
+.face-pan div.tab-main {
+    margin-top: 30px !important;
+}
+.face-pan div.tab-main > div {
+    background: transparent;
+    min-height: 40px;
+}
+.face-pan div.tab-main > div:hover {
+    box-shadow: unset;
+}
+.face-pan div.title {
+    padding: 0 10px;
+    display: flex;
+    align-items: center;
+}
+.face-pan div.title > div {
+    margin-right: 10px;
+    background: var(--color-main);
+    width: 5px;
+    height: 1rem;
+    border-radius: 5px;
+}
+.face-pan div.title > span {
+    flex: 1;
+    font-size: 0.85rem;
+    color: var(--color-font-2);
+}
+.face-pan div.title > svg {
+    margin-left: 10px;
+    cursor: pointer;
+}
+
+.face-pan div.system-face-bar {
+    height: calc(300px - 145px);
+    overflow-y: scroll;
+    width: 100%;
+}
+
+.face {
+    display: grid;
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.custom-face-bar .face {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.face > div {
+    background: var(--color-card-2);
+    border-radius: 100%;
+    cursor: pointer;
+    height: 40px;
+    width: 40px;
+    margin: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.face > div > .emoji-face {
+    display: block;
+    margin: 7.5px;
+    height: 20px;
+    width: 20px;
+}
+
+.face > span {
+    cursor: pointer;
+    width: 60px;
+    height: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 2px;
+}
+
+.face > span > img {
+    background: var(--color-card-2);
+    max-height: 100%;
+    max-width: 100%;
+    margin: 5px;
+    border-radius: 7px;
+}
+
+.jin-pan {
+    background: var(--color-card-1);
+    transform: translateY(-100%);
+    width: calc(100% - 40px);
+    flex-direction: column;
+    position: absolute;
+    margin-left: 20px;
+    max-height: 50vh;
+    max-width: 400px;
+    overflow: hidden;
+    display: flex;
+    padding: 0;
+}
+.jin-pan > div:first-child {
+    align-items: center;
+    display: flex;
+    padding: 20px;
+}
+.jin-pan > div:first-child > svg {
+    color: var(--color-font);
+    cursor: pointer;
+    height: 1.5rem;
+}
+.jin-pan > div:first-child > span {
+    white-space: nowrap;
+    margin-left: 15px;
+    font-size: 1rem;
+    flex: 1;
+}
+.jin-pan-body {
+    padding: 0 13px 0 20px;
+    margin-bottom: 20px;
+    overflow-y: scroll;
+}
+.jin-pan-body > div {
+    background: var(--color-card-2);
+    border-radius: 7px;
+    padding: 15px 20px;
+    margin: 10px 0;
+}
+.jin-pan-body > div:first-child {
+    margin-top: 0 !important;
+}
+.jin-pan-body > div > span {
+    color: var(--color-font-2);
+    text-align: right;
+    font-size: 0.8rem;
+    display: block;
+    width: 100%;
+}
+.jin-pan-body > div > div:first-child {
+    align-items: center;
+    display: flex;
+}
+.jin-pan-body > div > div:first-child > img {
+    border: 1px solid var(--color-card-2);
+    outline: 2px solid var(--color-main);
+    border-radius: 100%;
+    margin-right: 10px;
+    width: 25px;
+}
+.jin-pan-body > div > div:first-child > div {
+    flex-direction: column;
+    display: flex;
+}
+.jin-pan-body > div > div:first-child a {
+    color: var(--color-font);
+    font-size: 0.9rem;
+}
+.jin-pan-body > div > div:first-child span {
+    color: var(--color-font-2);
+    border-radius: 2rem;
+    font-size: 0.8rem;
+}
+.jin-pan-body > div > div:first-child > span {
+    font-size: 0.8rem;
+    flex: 1;
+    text-align: right;
+}
+.jin-pan-body > div > div.context {
+    padding: 15px 15px 5px 15px;
+    align-items: flex-end;
+    flex-direction: row;
+    flex-wrap: wrap;
+    display: flex;
+}
+.jin-pan-body > div > div.context > img {
+    margin: 0 10px 10px 10px;
+    border-radius: 7px;
+    max-width: 60%;
+}
+.jin-pan-body > div > div.context > .emoji-face {
+    margin: -5px 5px 0 5px;
+    height: 1.4rem;
+}
+.jin-pan-load {
+    background: transparent !important;
+    justify-content: center;
+    display: flex;
+}
+.jin-pan-load > svg {
+    color: var(--color-font);
+    width: 1rem;
+}
+
+.search-tag {
+    background: var(--color-card-1);
+    margin: 0 20px;
+    transition: all 0.3s;
+    align-items: center;
+    flex-direction: row;
+    border-radius: 7px;
+    overflow: hidden;
+    display: flex;
+    height: 0;
+}
+.search-tag.show {
+    margin: 10px 20px 10px 20px;
+    margin-top: 20px;
+    padding: 10px;
+    height: auto;
+}
+.search-tag svg {
+    color: var(--color-font-2);
+    margin-right: 10px;
+    height: 1rem;
+}
+.search-tag > span {
+    max-width: calc(100% - 2rem);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1;
+}
+
+.select-tag {
+    background: var(--color-card-1);
+    justify-content: space-evenly;
+    margin: 0 20px 10px 20px;
+    transition: all 0.3s;
+    align-items: center;
+    flex-direction: row;
+    border-radius: 7px;
+    overflow: hidden;
+    display: flex;
+    height: 0;
+}
+.select-tag.show {
+    margin: 0 20px 10px 20px;
+    margin-top: 20px;
+    padding: 15px 10px;
+    height: auto;
+}
+.select-tag > div {
+    flex-direction: column;
+    align-items: center;
+    display: flex;
+}
+.select-tag > div > svg,
+.select-tag > div > span:first-child {
+    background: var(--color-card-2);
+    color: var(--color-font-1);
+    border-radius: 100%;
+    cursor: pointer;
+    height: 0.8rem;
+    width: 0.8rem;
+    padding: 15px;
+}
+.select-tag > div > span:first-child {
+    border: 1px solid var(--color-main);
+    text-align: center;
+    font-weight: bold;
+    color: var(--color-font);
+    font-size: calc(0.8rem + 3px);
+    padding: 12px 15px 18px 15px;
+}
+.select-tag > div > span {
+    color: var(--color-font-2);
+    font-size: 0.75rem;
+    margin-top: 5px;
+}
+
+.replay-tag {
+    background: var(--color-card-1);
+    margin: 0 20px -10px 20px;
+    transition: all 0.3s;
+    align-items: center;
+    flex-direction: row;
+    border-radius: 7px;
+    overflow: hidden;
+    display: flex;
+    height: 0;
+}
+
+.img-pan-enter-active {
+    animation: img-pan-appear 0.3s;
+}
+
+.img-pan-leave-active {
+    animation: img-pan-appear 0.3s reverse;
+}
+
+@keyframes img-pan-appear {
+    from {
+        height: 0;
+    }
+
+    to {
+        height: calc(15vh + 0.9rem + 5px + 30px);
+    }
+}
+
+.img-pan {
+    overflow-x: auto;
+    padding: 0;
+    background-color: var(--color-card-1);
+    pointer-events: all;
+    margin: 10px 15px;
+}
+
+.img-pan > .imgs {
+    height: auto;
+    width: auto;
+    margin: 0;
+    display: flex;
+    flex-direction: row;
+}
+
+.img-pan > .imgs > div {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    padding: 5px;
+    border-radius: 7px;
+    border: 1px solid var(--color-main);
+    overflow: hidden;
+    margin: 10px 5px;
+    flex-shrink: 0;
+}
+
+.img-pan > .imgs > div:first-child {
+    margin-left: 10px;
+}
+.img-pan > .imgs > div:last-child {
+    margin-right: 10px;
+}
+
+.img-pan > .imgs > div > .img-btns {
+    position: absolute;
+    background-color: var(--color-bg);
+    display: flex;
+    border-radius: 1mm;
+    top: 1mm;
+    right: 1mm;
+}
+
+.img-pan > .imgs > div > .img-btns > div {
+    width: 5mm;
+    height: 5mm;
+    padding: 1mm;
+    display: flex;
+    transition: background-color 0.3s;
+}
+.img-pan > .imgs > div > .img-btns > div:nth-child(1) {
+    margin-right: 1mm;
+}
+
+.img-pan > .imgs > div > .img-btns > div > svg {
+    width: 5mm;
+    height: 5mm;
+    margin: 0;
+}
+.img-pan > .imgs > div > .img-btns > div:nth-child(1) > svg {
+    margin-top: 1mm;
+    margin-left: 1mm;
+    width: 5mm;
+    height: 4mm;
+}
+
+.img-pan > .imgs > div > .img-btns > div:hover {
+    background-color: var(--color-card-2);
+    cursor: pointer;
+}
+
+.img-pan > .imgs > div > .img {
+    width: 100px;
+    height: 15vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--color-card-1);
+    border-radius: 7px;
+    overflow: hidden;
+}
+
+.img-pan > .imgs > div > .img > img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.img-pan > .imgs > div > span {
+    color: var(--color-font-1);
+    margin-top: 5px;
+    font-size: 0.9rem;
+    text-align: center;
+    background-color: var(--color-card);
+    border-radius: 7px;
+}
+
+.input-special-tag {
+    background: var(--color-card);
+    transition: all 0.3s;
+    align-items: center;
+    flex-direction: row;
+    border-radius: 7px;
+    overflow: hidden;
+    display: flex;
+    height: 0;
+}
+.replay-tag.show {
+    margin: 0 20px -10px 20px;
+    margin-top: 20px;
+    padding: 10px;
+    height: auto;
+}
+.replay-tag svg {
+    color: var(--color-font-2);
+    margin-right: 10px;
+    height: 1rem;
+}
+.replay-tag > span {
+    max-width: calc(100% - 2rem);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1;
+}
+.replay-tag > div {
+    height: calc(1rem + 40px);
+    justify-content: center;
+    align-items: center;
+    margin: -20px 0;
+    display: flex;
+    width: 2rem;
+}
+.replay-tag > div > svg {
+    margin-right: 0 !important;
+    color: var(--color-font-1);
+}
+
+.at-tag {
+    background: var(--color-card-1);
+    transform-origin: bottom;
+    transform: scaleY(0);
+    transition: all 0.3s;
+    border-radius: 7px;
+    overflow-y: scroll;
+    max-height: 25vh;
+    padding: 0;
+    margin: 0;
+    height: 0;
+}
+.at-tag.show {
+    margin: 20px 20px -5px 20px;
+    transform: scaleY(1);
+    height: unset;
+}
+.at-tag > div {
+    align-items: center;
+    border-radius: 7px;
+    cursor: pointer;
+    padding: 10px;
+    display: flex;
+    margin: 5px;
+}
+.at-tag > div:hover {
+    background: var(--color-card-2);
+}
+.at-tag > div.selected {
+    background: var(--color-card-2);
+}
+.at-tag > div > img {
+    border-radius: 100%;
+    margin-right: 10px;
+    height: 1rem;
+}
+.at-tag > div > span {
+    flex: 1;
+}
+.at-tag > div > span.emp {
+    text-align: center;
+}
+.at-tag > div > a {
+    color: var(--color-font-2);
+    font-size: 0.8rem;
+}
+
+.forward-pan {
+    pointer-events: all;
+    position: absolute;
+    height: 100%;
+    z-index: 20;
+    width: 100%;
+    left: 0;
+    top: 0;
+}
+.forward-pan > div.bg {
+    background: var(--color-card-2);
+    height: 100%;
+    opacity: 0.7;
+    width: 100%;
+}
+.forward-pan > div.card {
+    transform: translate(-50%, -50%);
+    flex-direction: column;
+    margin: 50vh 0 0 50%;
+    position: absolute;
+    display: flex;
+    height: 70%;
+    width: 50%;
+    z-index: 1;
+}
+.forward-pan > div.card > header {
+    align-items: center;
+    padding: 10px;
+    display: flex;
+}
+.forward-pan > div.card > header > span {
+    font-size: 1rem;
+    flex: 1;
+}
+.forward-pan > div.card > header > svg {
+    color: var(--color-font);
+    cursor: pointer;
+    height: 1.5rem;
+}
+.forward-pan > div.card > input {
+    background: var(--color-card-1);
+    border-radius: 7px;
+    padding: 0 10px;
+    height: 40px;
+    border: 0;
+}
+.forward-pan > div.card > div {
+    flex-direction: column;
+    overflow-y: scroll;
+    margin-top: 10px;
+    display: flex;
+    flex: 1;
+}
+.forward-pan > div.card > div > div {
+    align-items: center;
+    border-radius: 7px;
+    cursor: pointer;
+    margin: 3px 0;
+    padding: 10px;
+    display: flex;
+}
+.forward-pan > div.card > div > div:hover {
+    background: var(--color-card-1);
+}
+.forward-pan > div.card > div > div > img {
+    border-radius: 7px;
+    margin-right: 10px;
+    height: 2.5rem;
+    width: 2.5rem;
+}
+.forward-pan > div.card > div > div p {
+    color: var(--color-font);
+    margin: 0;
+}
+.forward-pan > div.card > div > div span {
+    color: var(--color-font-1);
+    font-size: 0.8rem;
+}
+
+div.tiny-session-body {
+    align-items: center;
+    border-radius: 7px;
+    cursor: pointer;
+    margin: 3px 0;
+    padding: 10px;
+    display: flex;
+    height: 40px;
+    width: 100%;
+}
+div.tiny-session-body > div:nth-child(1) {
+    height: 1.8rem;
+    width: 5px;
+    border-radius: 2px;
+    margin-left: -10px;
+    margin-right: 5px;
+    background: var(--color-main);
+    transition: all 0.3s;
+    transform: scaleY(0);
+}
+div.tiny-session-body.selected {
+    background: linear-gradient(to right, var(--color-card-1), 60%, #00000000);
+}
+div.tiny-session-body.selected > div:nth-child(1) {
+    transform: scaleY(1);
+}
+div.tiny-session-body:hover {
+    background: var(--color-card-2);
+}
+div.tiny-session-body > img {
+    border-radius: 7px;
+    margin-right: 10px;
+    height: 2.5rem;
+    width: 2.5rem;
+    object-fit: cover;
+}
+div.tiny-session-body > svg {
+    border-radius: 7px;
+    margin-right: 10px;
+    height: 1.25rem;
+    width: 1.25rem;
+    padding: 0.625rem;
+    background-color: var(--color);
+}
+div.tiny-session-body > div {
+    overflow: hidden;
+}
+div.tiny-session-body > div p {
+    color: var(--color-font);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: block;
+    margin: 0;
+}
+div.tiny-session-body > div:nth-child(3) {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+}
+div.tiny-session-body > div:nth-child(3) > p {
+    min-height: 1rem;
+    height: 1rem;
+}
+div.tiny-session-body > div:nth-child(3) > div {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+}
+div.tiny-session-body > div:nth-child(3) > div > span {
+    color: var(--color-font-1);
+    font-size: 0.8rem;
+    min-width: 2rem;
+    margin-right: 3px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+div.tiny-session-body > div:nth-child(3) > div {
+    flex: 1;
+    display: flex;
+}
+div.tiny-session-body > div:nth-child(3) > div > svg {
+    margin-right: 5px;
+    height: 1rem;
+}
+
+.respond {
+    width: calc(100% + 65px);
+    overflow: hidden;
+    display: flex;
+    flex-direction: row !important;
+    margin-top: -70px !important;
+    margin-bottom: 20px !important;
+    border: 1px solid var(--color-shader);
+    background: var(--color-bg) !important;
+    box-shadow: 0 0 5px var(--color-shader);
+    min-height: 40px !important;
+    height: 40px !important;
+    transition: all 0.3s !important;
+    margin-left: -12px;
+}
+.respond:hover {
+    background: var(--color-bg) !important;
+}
+.respond > svg {
+    color: var(--color-font-2);
+    margin-right: 10px;
+    min-width: 20px;
+    height: 20px;
+    padding: 2.5px;
+    border-radius: 7px;
+}
+.respond > span,
+.respond > img {
+    transition: background 0.3s;
+    border-radius: 7px;
+    margin-right: 5px;
+    padding: 5px;
+    height: 25px;
+    width: 25px;
+}
+.respond > span:hover,
+.respond > svg:hover,
+.respond > img:hover {
+    background: var(--color-card-2);
+}
+
+.respond.open {
+    height: 100px !important;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    overflow-y: scroll;
+    padding: 10px !important;
+    margin-top: -140px !important;
+    margin-bottom: 20px !important;
+}
+.respond.open > svg {
+    display: none;
+}
+
+@media (max-width: 700px) {
+    /* 多选操作在窄屏下可横向滚动，避免操作项被裁切 */
+    .select-tag.show {
+        justify-content: flex-start;
+        overflow-x: auto;
+    }
+    .select-tag > div {
+        flex: 0 0 auto;
+        min-width: 64px;
+    }
+    /* 消息面板 */
+    .chat-pan {
+        height: calc(100% - 75px - var(--safe-area-bottom));
+        left: 80px !important;
+    }
+    .chat-pan.withBar {
+        height: calc(100% - 115px);
+        top: 40px;
+    }
+    .chat-pan.open {
+        transform: translateX(220px);
+    }
+    /* 群信息面板 */
+    .chat-info {
+        width: calc(100% - 80px);
+        transform: unset;
+        min-width: unset;
+        margin: 20px;
+        bottom: 75px;
+    }
+    .chat-info-pan {
+        height: calc(100% + 75px);
+    }
+    .chat-info-float-enter-active .chat-info {
+        animation: none;
+        transition: transform 0.3s;
+    }
+    .chat-info-float-leave-active .chat-info {
+        animation: none;
+        transition: transform 0.2s;
+    }
+    .chat-info-float-enter-from .chat-info,
+    .chat-info-float-leave-to .chat-info {
+        transform: translateX(100%);
+    }
+    /* AT 信息悬浮面板 */
+    .mumber-info > div:first-child {
+        max-width: 55%;
+    }
+    /* 合并转发消息面板 */
+    .merge-pan {
+        --merge-pan-width: 90%;
+    }
+    /* 发送图片面板 */
+    .img-sender > div.card {
+        width: calc(100% - 80px);
+    }
+    /* 转发面板 */
+    .forward-pan > div.card {
+        width: calc(100% - 120px);
+    }
+}
+
+@media (max-width: 500px) {
+    /* 群信息面板 */
+    .chat-info {
+        height: calc(100% - 115px);
+        width: calc(100% - 40px);
+        max-height: unset;
+        border-radius: 0;
+        min-width: unset;
+        margin: 0;
+    }
+    .chat-info:hover {
+        box-shadow: none;
+    }
+    /* 表情面板 */
+    .face-pan {
+        width: calc(100% - 40px);
+        height: 330px;
+    }
+    .face-stickers {
+        height: calc(330px - 120px);
+    }
+    .base-face > div {
+        height: 50px;
+        width: 50px;
+    }
+    .base-face > div > img {
+        height: 30px;
+        width: 30px;
+    }
+    .face-stickers > img {
+        height: 60px;
+        width: 60px;
+    }
+    /* 合并转发消息面板 */
+    .merge-pan {
+        --merge-pan-width: 100%;
+    }
+    .merge-pan.show > div:last-child:hover {
+        box-shadow: none;
+    }
+    /* 图片发送器 */
+    .img-sender > div.card {
+        height: calc(100% - 40px);
+        width: calc(100% - 40px);
+        border-radius: 0;
+        transform: unset;
+        box-shadow: none;
+        margin: 0;
+    }
+    /* 转发面板 */
+    .forward-pan > div.card {
+        height: calc(100% - 40px);
+        width: calc(100% - 40px);
+        border-radius: 0;
+        transform: unset;
+        box-shadow: none;
+        margin: 0;
+    }
+    /* 聊天面板（二级侧栏） */
+    .chat-pan {
+        left: 0 !important;
+    }
+    .chat-pan.open {
+        transform: translateX(100%);
+    }
+}