koishi-plugin-chat-patch 1.0.12 → 1.0.13

package/client/vue/style.css

@@ -5,7 +5,7 @@
     border-left: 4px solid rgba(151, 152, 152, .45);
     border-radius: 6px;
     font-size: .9em;
-    position: relative;
+    position: relative
 }
 
 .quote-indicator {
@@ -13,14 +13,14 @@
     color: #007bff;
     font-weight: 600;
     margin-bottom: 4px;
-    text-transform: uppercase;
+    text-transform: uppercase
 }
 
 .quote-header {
     display: flex;
     align-items: center;
     margin-bottom: 4px;
-    gap: 6px;
+    gap: 6px
 }
 
 .quote-avatar {
@@ -28,13 +28,13 @@
     height: 20px;
     border-radius: 50%;
     overflow: hidden;
-    flex-shrink: 0;
+    flex-shrink: 0
 }
 
 .quote-avatar img {
     width: 100%;
     height: 100%;
-    object-fit: cover;
+    object-fit: cover
 }
 
 .quote-avatar .avatar-placeholder {
@@ -44,21 +44,21 @@
     align-items: center;
     justify-content: center;
     background-color: #6c757d;
-    color: white;
+    color: #fff;
     font-size: 10px;
-    font-weight: bold;
+    font-weight: 700
 }
 
 .quote-username {
     font-weight: 600;
     color: #007bff;
-    font-size: .85em;
+    font-size: .85em
 }
 
 .quote-time {
     color: #6c757d;
     font-size: .75em;
-    margin-left: auto;
+    margin-left: auto
 }
 
 .quote-content {
@@ -67,42 +67,42 @@
     word-wrap: break-word;
     word-break: break-all;
     overflow-wrap: anywhere;
-    hyphens: auto;
+    hyphens: auto
 }
 
 .quote-content .message-image {
-    max-width: 200px;
-    max-height: 100px;
+    max-width: min(200px, 50vw);
+    max-height: 100px
 }
 
 .quote-content .message-image-container {
-    margin: 2px 0;
+    margin: 2px 0
 }
 
-@media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme:dark) {
     .message-quote {
         background-color: rgba(255, 255, 255, .078);
-        border-left-color: #0d6efd;
+        border-left-color: #0d6efd
     }
 
     .quote-content {
-        color: #adb5bd;
+        color: #adb5bd
     }
 
     .quote-username {
-        color: #0d6efd;
+        color: #0d6efd
     }
 }
 
 .chat-container {
     display: flex;
     height: 100vh;
-    background: transparent;
-    margin-left: 0%;
+    background: 0 0;
+    margin-left: 0;
     width: 100%;
     overflow: hidden;
     color: inherit;
-    position: relative;
+    position: relative
 }
 
 .bot-list,
@@ -110,66 +110,66 @@
 .message-area {
     display: flex;
     flex-direction: column;
-    background: transparent;
-    border-right: 1px solid rgba(128, 128, 128, .2);
+    background: 0 0;
+    border-right: 1px solid rgba(128, 128, 128, .2)
 }
 
 .bot-list {
     width: 250px;
     min-width: 250px;
     max-width: 250px;
-    flex-shrink: 0;
+    flex-shrink: 0
 }
 
 .channel-list {
     width: 300px;
     min-width: 300px;
     max-width: 300px;
-    flex-shrink: 0;
+    flex-shrink: 0
 }
 
 .message-area {
     flex: 1;
-    border-right: none;
+    border-right: none
 }
 
 .panel-header {
     padding: 16px;
     border-bottom: 1px solid rgba(128, 128, 128, .2);
-    background: transparent;
+    background: 0 0;
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: space-between
 }
 
 .panel-header h3 {
     margin: 0;
     font-size: 16px;
     font-weight: 600;
-    color: currentColor;
+    color: currentColor
 }
 
 .back-button {
     display: none;
-    background: none;
+    background: 0 0;
     border: none;
     color: currentColor;
     font-size: 18px;
     cursor: pointer;
     padding: 4px 8px;
     border-radius: 4px;
-    transition: background-color .2s;
+    transition: background-color .2s
 }
 
 .back-button:hover {
-    background: rgba(128, 128, 128, .1);
+    background: rgba(128, 128, 128, .1)
 }
 
 .bot-items,
 .channel-items {
     flex: 1;
     overflow-y: auto;
-    max-height: calc(100vh - 60px);
+    max-height: calc(100vh - 60px)
 }
 
 .bot-item,
@@ -179,18 +179,18 @@
     padding: 12px 16px;
     cursor: pointer;
     border-bottom: 1px solid rgba(128, 128, 128, .1);
-    transition: background-color .2s;
+    transition: background-color .2s
 }
 
 .bot-item:hover,
 .channel-item:hover {
-    background: rgba(128, 128, 128, .1);
+    background: rgba(128, 128, 128, .1)
 }
 
 .bot-item.active,
 .channel-item.active {
     background: rgba(33, 150, 243, .1);
-    border-right: 3px solid #2196f3;
+    border-right: 3px solid #2196f3
 }
 
 .bot-avatar {
@@ -202,79 +202,79 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: #e0e0e0;
+    background: #e0e0e0
 }
 
 .bot-avatar img {
     width: 100%;
     height: 100%;
-    object-fit: cover;
+    object-fit: cover
 }
 
 .avatar-placeholder {
     font-size: 16px;
-    font-weight: bold;
+    font-weight: 700;
     color: currentColor;
-    opacity: .7;
+    opacity: .7
 }
 
 .bot-info {
-    flex: 1;
+    flex: 1
 }
 
 .bot-name {
     font-weight: 500;
     color: currentColor;
-    margin-bottom: 2px;
+    margin-bottom: 2px
 }
 
 .bot-platform {
     font-size: 12px;
     color: currentColor;
-    opacity: .7;
+    opacity: .7
 }
 
 .bot-status {
     width: 8px;
     height: 8px;
     border-radius: 50%;
-    margin-left: 8px;
+    margin-left: 8px
 }
 
 .bot-status.online {
-    background: #4caf50;
+    background: #4caf50
 }
 
 .bot-status.offline {
-    background: #f44336;
+    background: #f44336
 }
 
 .channel-info {
-    flex: 1;
+    flex: 1
 }
 
 .channel-name {
     font-weight: 500;
     color: currentColor;
-    margin-bottom: 2px;
+    margin-bottom: 2px
 }
 
 .channel-type {
     font-size: 12px;
     color: currentColor;
-    opacity: .7;
+    opacity: .7
 }
 
 .channel-message-count {
     background: #2196f3;
-    color: white;
+    color: #fff;
     font-size: 12px;
     padding: 2px 6px;
     border-radius: 10px;
     min-width: 18px;
     text-align: center;
     position: relative;
-    transition: all .2s ease;
+    transition: all .2s ease
 }
 
 .channel-message-count.draggable-bubble {
@@ -282,20 +282,20 @@
     user-select: none;
     -webkit-user-select: none;
     -moz-user-select: none;
-    -ms-user-select: none;
+    -ms-user-select: none
 }
 
 .channel-message-count.draggable-bubble:hover {
     background: #1976d2;
     transform: scale(1.1);
-    box-shadow: 0 2px 8px rgba(33, 150, 243, .3);
+    box-shadow: 0 2px 8px rgba(33, 150, 243, .3)
 }
 
-.channel-message-count.draggable-bubble:active,
-.channel-message-count.draggable-bubble.dragging {
+.channel-message-count.draggable-bubble.dragging,
+.channel-message-count.draggable-bubble:active {
     cursor: grabbing;
     background: #1565c0;
-    box-shadow: 0 4px 12px rgba(33, 150, 243, .4);
+    box-shadow: 0 4px 12px rgba(33, 150, 243, .4)
 }
 
 .dragging-clone {
@@ -308,18 +308,18 @@
     align-items: center;
     justify-content: center;
     background: #2196f3;
-    color: white;
+    color: #fff;
     font-size: 12px;
     padding: 2px 6px;
     border-radius: 10px;
     min-width: 18px;
     text-align: center;
-    box-shadow: 0 4px 12px rgba(33, 150, 243, .4);
+    box-shadow: 0 4px 12px rgba(33, 150, 243, .4)
 }
 
 .dragging-clone.will-delete {
     background: #f44336 !important;
-    animation: shake .3s ease-in-out infinite;
+    animation: shake .3s ease-in-out infinite
 }
 
 @keyframes pulseThreshold {
@@ -329,26 +329,26 @@
         opacity: .4;
         transform: scale(.9);
         border-color: rgba(244, 67, 54, .6);
-        box-shadow: 0 0 15px rgba(244, 67, 54, .2);
+        box-shadow: 0 0 15px rgba(244, 67, 54, .2)
     }
 
     50% {
         opacity: .8;
         transform: scale(1.1);
-        border-color: rgba(244, 67, 54, 1);
-        box-shadow: 0 0 25px rgba(244, 67, 54, .4);
+        border-color: #f44336;
+        box-shadow: 0 0 25px rgba(244, 67, 54, .4)
     }
 }
 
 @keyframes menuSlideIn {
     0% {
         transform: translateY(8px);
-        opacity: 0;
+        opacity: 0
     }
 
     100% {
         transform: translateY(0);
-        opacity: 1;
+        opacity: 1
     }
 }
 
@@ -357,14 +357,14 @@
     flex-direction: column;
     height: calc(100vh - 60px);
     overflow: hidden;
-    position: relative;
+    position: relative
 }
 
 .message-history {
     flex: 1;
     overflow-y: auto;
     padding: 16px 16px 8px 16px;
-    max-height: calc(100vh - 200px);
+    max-height: calc(100vh - 200px)
 }
 
 .message-item {
@@ -372,49 +372,49 @@
     margin-bottom: 16px;
     padding: 8px;
     border-radius: 8px;
-    transition: background-color .3s ease;
+    transition: background-color .3s ease
 }
 
 .message-item:hover {
-    background-color: rgba(128, 128, 128, .1);
+    background-color: rgba(128, 128, 128, .1)
 }
 
 .message-item.new-message {
     background-color: rgba(76, 175, 80, .2);
-    animation: highlight 2s ease-out;
+    animation: highlight 2s ease-out
 }
 
 .message-item.bot-message {
     flex-direction: row-reverse;
-    justify-content: flex-start;
+    justify-content: flex-start
 }
 
 .message-item.bot-message .message-avatar {
     margin-right: 0;
-    margin-left: 12px;
+    margin-left: 12px
 }
 
 .message-item.bot-message .message-content-wrapper {
     display: flex;
     flex-direction: column;
-    align-items: flex-end;
+    align-items: flex-end
 }
 
 .message-item.bot-message .message-header {
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    margin-bottom: 4px;
+    margin-bottom: 4px
 }
 
 .message-item.bot-message .message-username {
     margin-right: 0;
     margin-left: 8px;
-    order: 2;
+    order: 2
 }
 
 .message-item.bot-message .message-time {
-    order: 1;
+    order: 1
 }
 
 .message-item.bot-message .message-text {
@@ -427,16 +427,16 @@
     text-align: left;
     word-wrap: break-word;
     word-break: break-all;
-    overflow-wrap: anywhere;
+    overflow-wrap: anywhere
 }
 
 @keyframes highlight {
     0% {
-        background-color: rgba(76, 175, 80, .3);
+        background-color: rgba(76, 175, 80, .3)
     }
 
     100% {
-        background-color: transparent;
+        background-color: transparent
     }
 }
 
@@ -450,42 +450,42 @@
     align-items: center;
     justify-content: center;
     background: #e0e0e0;
-    flex-shrink: 0;
+    flex-shrink: 0
 }
 
 .message-avatar img {
     width: 100%;
     height: 100%;
-    object-fit: cover;
+    object-fit: cover
 }
 
 .message-avatar .avatar-placeholder {
     font-size: 12px;
-    font-weight: bold;
+    font-weight: 700;
     color: currentColor;
-    opacity: .7;
+    opacity: .7
 }
 
 .message-content-wrapper {
-    flex: 1;
+    flex: 1
 }
 
 .message-header {
     display: flex;
     align-items: center;
-    margin-bottom: 4px;
+    margin-bottom: 4px
 }
 
 .message-username {
     font-weight: 500;
     color: currentColor;
-    margin-right: 8px;
+    margin-right: 8px
 }
 
 .message-time {
     font-size: 12px;
     color: currentColor;
-    opacity: .5;
+    opacity: .5
 }
 
 .message-text {
@@ -496,7 +496,7 @@
     white-space: pre-wrap;
     max-width: 100%;
     overflow-wrap: anywhere;
-    hyphens: auto;
+    hyphens: auto
 }
 
 .message-item:not(.bot-message) .message-text {
@@ -508,7 +508,7 @@
     max-width: 80%;
     word-wrap: break-word;
     word-break: break-all;
-    overflow-wrap: anywhere;
+    overflow-wrap: anywhere
 }
 
 .message-input {
@@ -516,17 +516,17 @@
     flex-direction: column;
     padding: 12px 16px 16px 16px;
     border-top: 1px solid rgba(128, 128, 128, .2);
-    background: transparent;
+    background: 0 0;
     flex-shrink: 0;
     position: sticky;
     bottom: 0;
-    margin-top: -10px;
+    margin-top: -10px
 }
 
 .input-row {
     display: flex;
     gap: 8px;
-    align-items: center;
+    align-items: center
 }
 
 .floating-scroll-button {
@@ -542,20 +542,20 @@
     justify-content: center;
     cursor: pointer;
     box-shadow: 0 4px 12px rgba(33, 150, 243, .3);
-    color: white;
+    color: #fff;
     transition: all .3s ease;
     z-index: 100;
-    border: 2px solid rgba(255, 255, 255, .2);
+    border: 2px solid rgba(255, 255, 255, .2)
 }
 
 .floating-scroll-button:hover {
     background: #1976d2;
     transform: scale(1.1);
-    box-shadow: 0 6px 16px rgba(33, 150, 243, .4);
+    box-shadow: 0 6px 16px rgba(33, 150, 243, .4)
 }
 
 .floating-scroll-button:active {
-    transform: scale(.95);
+    transform: scale(.95)
 }
 
 .input-row input {
@@ -564,39 +564,39 @@
     padding: 8px 12px;
     border: 1px solid rgba(128, 128, 128, .3);
     border-radius: 4px;
-    outline: none;
-    background: transparent;
-    color: currentColor;
+    outline: 0;
+    background: 0 0;
+    color: currentColor
 }
 
 .input-row input:focus {
     border-color: #2196f3;
-    box-shadow: 0 0 0 2px rgba(33, 150, 243, .2);
+    box-shadow: 0 0 0 2px rgba(33, 150, 243, .2)
 }
 
 .input-row button {
     padding: 8px 16px;
     background: #2196f3;
-    color: white;
+    color: #fff;
     border: none;
     border-radius: 4px;
     cursor: pointer;
-    transition: background-color .2s;
+    transition: background-color .2s
 }
 
 .input-row button:hover:not(:disabled) {
-    background: #1976d2;
+    background: #1976d2
 }
 
 .input-row button:disabled {
     background: rgba(128, 128, 128, .3);
-    cursor: not-allowed;
+    cursor: not-allowed
 }
 
 .input-row button.is-sending {
     background: #ffc107 !important;
     color: #333 !important;
-    cursor: default !important;
+    cursor: default !important
 }
 
 .empty-state {
@@ -606,13 +606,13 @@
     height: 100%;
     color: currentColor;
     opacity: .5;
-    font-size: 14px;
+    font-size: 14px
 }
 
 .message-image-container {
     margin: 8px 0;
     max-width: 100%;
-    display: block;
+    display: block
 }
 
 .message-image {
@@ -621,10 +621,14 @@
     display: block;
     cursor: pointer;
     transition: transform .2s ease;
+    max-width: min(400px, 66.67vw);
+    max-height: 200px;
+    width: auto;
+    height: auto
 }
 
 .message-image:hover {
-    transform: scale(1.02);
+    transform: scale(1.02)
 }
 
 .message-image-loading {
@@ -634,7 +638,7 @@
     border-radius: 4px;
     color: currentColor;
     opacity: .7;
-    font-size: 12px;
+    font-size: 12px
 }
 
 .message-image-error {
@@ -646,7 +650,7 @@
     color: #f44336;
     font-size: 12px;
     max-width: 300px;
-    word-break: break-word;
+    word-break: break-word
 }
 
 .message-text-content {
@@ -654,42 +658,41 @@
     word-wrap: break-word;
     word-break: break-all;
     overflow-wrap: anywhere;
-    hyphens: auto;
+    hyphens: auto
 }
 
 .message-paragraph {
     display: block;
-    margin-bottom: 4px;
+    margin-bottom: 4px
 }
 
 .message-paragraph:last-child {
-    margin-bottom: 0;
+    margin-bottom: 0
 }
 
-/* 合并转发消息样式 */
 .forward-message-container {
-    border: 1px solid #ffffff;
+    border: 1px solid #fff;
     border-radius: 8px;
     margin: 4px 0;
     overflow: hidden;
-    background: #f9f9f900;
+    background: #f9f9f900
 }
 
 .forward-message-preview {
     padding: 12px;
     cursor: pointer;
-    transition: background-color 0.2s;
+    transition: background-color .2s
 }
 
 .forward-message-preview:hover {
-    background: #f0f0f0;
+    background: #f0f0f0
 }
 
 .forward-message-title {
     font-weight: 600;
     color: #333;
     margin-bottom: 8px;
-    font-size: 14px;
+    font-size: 14px
 }
 
 .forward-message-preview-item {
@@ -699,7 +702,7 @@
     line-height: 1.4;
     word-wrap: break-word;
     word-break: break-all;
-    overflow-wrap: anywhere;
+    overflow-wrap: anywhere
 }
 
 .forward-message-footer {
@@ -708,51 +711,51 @@
     align-items: center;
     margin-top: 8px;
     padding-top: 8px;
-    border-top: 1px solid #e8e8e8;
+    border-top: 1px solid #e8e8e8
 }
 
 .forward-message-count {
     color: #2196f3;
-    font-size: 12px;
+    font-size: 12px
 }
 
 .forward-message-toggle {
     color: #666;
-    font-size: 12px;
+    font-size: 12px
 }
 
 .forward-message-expanded {
     border-top: 1px solid #e0e0e0;
-    background: white;
+    background: #fff;
     max-height: 400px;
-    overflow-y: auto;
+    overflow-y: auto
 }
 
 .forwarded-message-item {
     padding: 12px;
-    border-bottom: 1px solid #f0f0f0;
+    border-bottom: 1px solid #f0f0f0
 }
 
 .forwarded-message-item:last-child {
-    border-bottom: none;
+    border-bottom: none
 }
 
 .forwarded-message-header {
     display: flex;
     align-items: center;
-    margin-bottom: 6px;
+    margin-bottom: 6px
 }
 
 .forwarded-message-nickname {
     font-weight: 600;
     color: #333;
-    font-size: 13px;
+    font-size: 13px
 }
 
 .forwarded-message-userid {
     color: #999;
     font-size: 11px;
-    margin-left: 6px;
+    margin-left: 6px
 }
 
 .forwarded-message-content {
@@ -761,7 +764,7 @@
     line-height: 1.4;
     word-wrap: break-word;
     word-break: break-all;
-    overflow-wrap: anywhere;
+    overflow-wrap: anywhere
 }
 
 .message-at {
@@ -770,7 +773,7 @@
     padding: 2px 4px;
     border-radius: 3px;
     font-weight: 500;
-    cursor: pointer;
+    cursor: pointer
 }
 
 .message-unknown {
@@ -779,7 +782,7 @@
     padding: 2px 4px;
     border-radius: 3px;
     font-style: italic;
-    cursor: help;
+    cursor: help
 }
 
 .input-row input {
@@ -788,53 +791,53 @@
     padding: 8px 12px;
     border: 1px solid rgba(128, 128, 128, .3);
     border-radius: 4px;
-    outline: none;
-    background: transparent;
-    color: currentColor;
+    outline: 0;
+    background: 0 0;
+    color: currentColor
 }
 
 .input-row input:focus {
     border-color: #2196f3;
-    box-shadow: 0 0 0 2px rgba(33, 150, 243, .2);
+    box-shadow: 0 0 0 2px rgba(33, 150, 243, .2)
 }
 
 .input-row input::placeholder {
     color: currentColor;
-    opacity: .5;
+    opacity: .5
 }
 
 .input-row button {
     padding: 8px 16px;
     background: #2196f3;
-    color: white;
+    color: #fff;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     transition: background-color .2s;
     flex-shrink: 0;
-    white-space: nowrap;
+    white-space: nowrap
 }
 
 .input-row button:hover:not(:disabled) {
-    background: #1976d2;
+    background: #1976d2
 }
 
 .input-row button:disabled {
     background: rgba(128, 128, 128, .3);
-    cursor: not-allowed;
+    cursor: not-allowed
 }
 
 .input-row button.is-sending {
     background: #ffc107 !important;
     color: #333 !important;
-    cursor: default !important;
+    cursor: default !important
 }
 
 .message-input .input-row button.is-sending {
     background: #ffc107 !important;
     color: #333 !important;
     cursor: default !important;
-    border-color: #ffc107 !important;
+    border-color: #ffc107 !important
 }
 
 .empty-state {
@@ -844,7 +847,7 @@
     height: 100%;
     color: currentColor;
     opacity: .5;
-    font-size: 14px;
+    font-size: 14px
 }
 
 .empty-state {
@@ -854,7 +857,7 @@
     height: 100%;
     color: currentColor;
     opacity: .5;
-    font-size: 14px;
+    font-size: 14px
 }
 
 .message-text-content {
@@ -862,12 +865,12 @@
     word-wrap: break-word;
     word-break: break-all;
     overflow-wrap: anywhere;
-    hyphens: auto;
+    hyphens: auto
 }
 
 .message-image-container {
     display: block;
-    margin: 4px 0;
+    margin: 4px 0
 }
 
 .message-image {
@@ -877,11 +880,11 @@
     cursor: pointer;
     transition: transform .2s ease;
     object-fit: contain;
-    background: rgba(128, 128, 128, .1);
+    background: rgba(128, 128, 128, .1)
 }
 
 .message-image:hover {
-    transform: scale(1.02);
+    transform: scale(1.02)
 }
 
 .message-image-loading {
@@ -896,7 +899,7 @@
     color: currentColor;
     opacity: .7;
     font-size: 14px;
-    border: 1px dashed rgba(128, 128, 128, .3);
+    border: 1px dashed rgba(128, 128, 128, .3)
 }
 
 .message-image-error {
@@ -914,7 +917,7 @@
     font-size: 14px;
     border: 1px dashed rgba(128, 128, 128, .3);
     padding: 8px;
-    text-align: center;
+    text-align: center
 }
 
 .message-at {
@@ -925,11 +928,11 @@
     font-weight: 500;
     cursor: pointer;
     display: inline-block;
-    margin: 0 2px;
+    margin: 0 2px
 }
 
 .message-at:hover {
-    background: rgba(33, 150, 243, .2);
+    background: rgba(33, 150, 243, .2)
 }
 
 .message-unknown {
@@ -940,39 +943,39 @@
     font-size: 12px;
     display: inline-block;
     margin: 0 2px;
-    cursor: help;
+    cursor: help
 }
 
 @keyframes pulse {
 
     0%,
     100% {
-        transform: translate(-50%, -50%) scale(1);
+        transform: translate(-50%, -50%) scale(1)
     }
 
     50% {
-        transform: translate(-50%, -50%) scale(1.1);
+        transform: translate(-50%, -50%) scale(1.1)
     }
 }
 
 .channel-message-count.will-delete {
     background: #f44336 !important;
-    animation: shake .3s ease-in-out infinite;
+    animation: shake .3s ease-in-out infinite
 }
 
 @keyframes shake {
 
     0%,
     100% {
-        transform: translateX(0);
+        transform: translateX(0)
     }
 
     25% {
-        transform: translateX(-2px);
+        transform: translateX(-2px)
     }
 
     75% {
-        transform: translateX(2px);
+        transform: translateX(2px)
     }
 }
 
@@ -981,7 +984,7 @@ body.dragging-bubble-global {
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
-    cursor: grabbing;
+    cursor: grabbing
 }
 
 .drag-threshold-circle {
@@ -992,7 +995,7 @@ body.dragging-bubble-global {
     z-index: 999;
     background: rgba(244, 67, 54, .1);
     box-shadow: 0 0 20px rgba(244, 67, 54, .3);
-    animation: pulseThreshold 1.5s ease-in-out infinite;
+    animation: pulseThreshold 1.5s ease-in-out infinite
 }
 
 .context-menu {
@@ -1005,7 +1008,7 @@ body.dragging-bubble-global {
     min-width: 180px;
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
-    overflow: hidden;
+    overflow: hidden
 }
 
 .context-menu-item {
@@ -1016,32 +1019,32 @@ body.dragging-bubble-global {
     font-weight: 500;
     transition: all .2s ease;
     border-bottom: 1px solid rgba(0, 0, 0, .08);
-    position: relative;
+    position: relative
 }
 
 .context-menu-item:last-child {
-    border-bottom: none;
+    border-bottom: none
 }
 
 .context-menu-item:hover {
     background: rgba(33, 150, 243, .1);
     color: #1976d2;
-    transform: translateX(2px);
+    transform: translateX(2px)
 }
 
 .context-menu-item.danger {
-    color: #d32f2f;
+    color: #d32f2f
 }
 
 .context-menu-item.danger:hover {
     background: rgba(244, 67, 54, .1);
-    color: #c62828;
+    color: #c62828
 }
 
 .bot-item.pinned,
 .channel-item.pinned {
     background: rgba(255, 193, 7, .1);
-    border-left: 3px solid #ffc107;
+    border-left: 3px solid #ffc107
 }
 
 .bot-item.pinned::before,
@@ -1052,48 +1055,48 @@ body.dragging-bubble-global {
     top: 50%;
     transform: translateY(-50%);
     font-size: 12px;
-    opacity: .7;
+    opacity: .7
 }
 
 .bot-item.pinned {
     position: relative;
-    padding-left: 24px;
+    padding-left: 24px
 }
 
 .channel-item.pinned {
     position: relative;
-    padding-left: 24px;
+    padding-left: 24px
 }
 
-@media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme:dark) {
     .context-menu {
         background: rgba(255, 255, 255, .15);
         border-color: rgba(255, 255, 255, .2);
-        box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
+        box-shadow: 0 8px 32px rgba(0, 0, 0, .4)
     }
 
     .context-menu-item {
         color: #fff;
-        border-bottom-color: rgba(255, 255, 255, .1);
+        border-bottom-color: rgba(255, 255, 255, .1)
     }
 
     .context-menu-item:hover {
         background: rgba(33, 150, 243, .2);
-        color: #64b5f6;
+        color: #64b5f6
     }
 
     .context-menu-item.danger {
-        color: #ff8a80;
+        color: #ff8a80
     }
 
     .context-menu-item.danger:hover {
         background: rgba(244, 67, 54, .2);
-        color: #ffab91;
+        color: #ffab91
     }
 
     .bot-item.pinned,
     .channel-item.pinned {
-        background: rgba(255, 193, 7, .15);
+        background: rgba(255, 193, 7, .15)
     }
 }
 
@@ -1107,13 +1110,13 @@ body.dragging-bubble-global {
     transition: all .3s ease;
     cursor: pointer;
     backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px)
 }
 
 .message-share-card:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
-    border-color: rgba(33, 150, 243, .3);
+    border-color: rgba(33, 150, 243, .3)
 }
 
 .share-card-preview {
@@ -1123,7 +1126,7 @@ body.dragging-bubble-global {
     align-items: center;
     justify-content: center;
     padding: 4px;
-    border-radius: 12px 12px 0 0;
+    border-radius: 12px 12px 0 0
 }
 
 .share-card-image {
@@ -1133,22 +1136,22 @@ body.dragging-bubble-global {
     object-fit: contain;
     transition: transform .3s ease;
     display: block;
-    border-radius: 4px;
+    border-radius: 4px
 }
 
 .message-share-card:hover .share-card-image {
-    transform: scale(1.05);
+    transform: scale(1.05)
 }
 
 .share-card-content {
-    padding: 8px;
+    padding: 8px
 }
 
 .share-card-header {
     display: flex;
     align-items: center;
     margin-bottom: 12px;
-    gap: 12px;
+    gap: 12px
 }
 
 .share-card-icon {
@@ -1156,12 +1159,12 @@ body.dragging-bubble-global {
     height: 32px;
     border-radius: 8px;
     object-fit: cover;
-    flex-shrink: 0;
+    flex-shrink: 0
 }
 
 .share-card-app-info {
     flex: 1;
-    min-width: 0;
+    min-width: 0
 }
 
 .share-card-app-name {
@@ -1169,7 +1172,7 @@ body.dragging-bubble-global {
     color: currentColor;
     opacity: .7;
     margin-bottom: 2px;
-    font-weight: 500;
+    font-weight: 500
 }
 
 .share-card-title {
@@ -1180,7 +1183,7 @@ body.dragging-bubble-global {
     word-wrap: break-word;
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    overflow: hidden;
+    overflow: hidden
 }
 
 .share-card-desc {
@@ -1192,7 +1195,7 @@ body.dragging-bubble-global {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
-    word-wrap: break-word;
+    word-wrap: break-word
 }
 
 .share-card-link-hint {
@@ -1201,29 +1204,29 @@ body.dragging-bubble-global {
     font-weight: 500;
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 4px
 }
 
 .share-card-link-hint::after {
     content: "→";
-    transition: transform .2s ease;
+    transition: transform .2s ease
 }
 
 .message-share-card:hover .share-card-link-hint::after {
-    transform: translateX(2px);
+    transform: translateX(2px)
 }
 
 .message-json-error,
 .message-json-raw {
     display: inline-block;
     margin: 8px 0;
-    max-width: 400px;
+    max-width: 400px
 }
 
 .json-error-text {
     color: #f44336;
     font-size: 14px;
-    font-weight: 500;
+    font-weight: 500
 }
 
 .json-label {
@@ -1231,11 +1234,11 @@ body.dragging-bubble-global {
     opacity: .7;
     font-size: 12px;
     font-weight: 500;
-    margin-bottom: 8px;
+    margin-bottom: 8px
 }
 
 .json-raw-data {
-    margin-top: 8px;
+    margin-top: 8px
 }
 
 .json-raw-data summary {
@@ -1247,11 +1250,11 @@ body.dragging-bubble-global {
     border-radius: 4px;
     background: rgba(33, 150, 243, .1);
     display: inline-block;
-    transition: background-color .2s ease;
+    transition: background-color .2s ease
 }
 
 .json-raw-data summary:hover {
-    background: rgba(33, 150, 243, .2);
+    background: rgba(33, 150, 243, .2)
 }
 
 .json-raw-content {
@@ -1269,29 +1272,31 @@ body.dragging-bubble-global {
     overflow-wrap: anywhere;
     max-height: 200px;
     overflow-y: auto;
-    border: 1px solid rgba(128, 128, 128, .2);
+    border: 1px solid rgba(128, 128, 128, .2)
 }
 
-@media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme:dark) {
     .message-share-card {
         background: rgba(255, 255, 255, .08);
-        border-color: rgba(255, 255, 255, .15);
+        border-color: rgba(255, 255, 255, .15)
     }
 
     .message-share-card:hover {
         border-color: rgba(33, 150, 243, .5);
-        box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
+        box-shadow: 0 8px 24px rgba(0, 0, 0, .3)
     }
 
     .json-raw-content {
         background: rgba(255, 255, 255, .05);
-        border-color: rgba(255, 255, 255, .1);
+        border-color: rgba(255, 255, 255, .1)
     }
 }
 
-@media (max-width: 768px) {
+@media (max-width:768px) {
     .chat-container {
         position: relative;
+        height: 100vh;
+        height: 100dvh
     }
 
     .bot-list,
@@ -1303,52 +1308,52 @@ body.dragging-bubble-global {
         width: 100%;
         height: 100%;
         transition: transform .3s ease;
-        z-index: 1;
+        z-index: 1
     }
 
     .bot-list {
         transform: translateX(0);
-        z-index: 3;
+        z-index: 3
     }
 
     .channel-list {
         transform: translateX(100%);
-        z-index: 2;
+        z-index: 2
     }
 
     .message-area {
         transform: translateX(200%);
-        z-index: 1;
+        z-index: 1
     }
 
     .chat-container.show-channels .bot-list {
-        transform: translateX(-100%);
+        transform: translateX(-100%)
     }
 
     .chat-container.show-channels .channel-list {
         transform: translateX(0);
-        z-index: 3;
+        z-index: 3
     }
 
     .chat-container.show-channels .message-area {
-        transform: translateX(100%);
+        transform: translateX(100%)
     }
 
     .chat-container.show-messages .bot-list {
-        transform: translateX(-200%);
+        transform: translateX(-200%)
     }
 
     .chat-container.show-messages .channel-list {
-        transform: translateX(-100%);
+        transform: translateX(-100%)
     }
 
     .chat-container.show-messages .message-area {
         transform: translateX(0);
-        z-index: 3;
+        z-index: 3
     }
 
     .back-button {
-        display: none !important;
+        display: none !important
     }
 
     .panel-header {
@@ -1356,136 +1361,144 @@ body.dragging-bubble-global {
         position: sticky;
         top: 0;
         z-index: 5;
-        background: inherit;
+        background: inherit
     }
 
     .panel-header h3 {
-        text-align: right;
+        text-align: right
     }
 
     .floating-scroll-button {
         right: 16px;
-        bottom: 70px;
+        bottom: calc(90px + env(safe-area-inset-bottom, 0px));
         width: 40px;
         height: 40px;
+        transition: bottom .3s ease
     }
 
     .message-input {
-        padding: 8px 12px 12px 12px;
+        padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px;
         position: fixed;
-        bottom: 0;
+        bottom: 20px;
         left: 0;
         right: 0;
         background: inherit;
         border-top: 1px solid rgba(128, 128, 128, .2);
         z-index: 10;
+        min-height: calc(60px + env(safe-area-inset-bottom, 0px));
+        transition: transform .3s ease;
+        transform: translateZ(0)
     }
 
     .input-row input {
         font-size: 16px;
-        padding: 10px 12px;
+        padding: 10px 12px
     }
 
     .input-row button {
         padding: 10px 16px;
-        font-size: 16px;
+        font-size: 16px
     }
 
     .message-history {
         padding: 12px;
-        max-height: calc(100vh - 140px);
-        padding-bottom: 80px;
+        max-height: calc(100vh - 140px - env(safe-area-inset-bottom, 0px));
+        max-height: calc(100dvh - 140px - env(safe-area-inset-bottom, 0px));
+        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+        transition: max-height .3s ease
     }
 
     .message-item {
         margin-bottom: 12px;
-        padding: 6px;
+        padding: 6px
     }
 
     .message-text {
-        max-width: 90% !important;
+        max-width: 90% !important
     }
 
     .message-avatar {
         width: 28px;
         height: 28px;
-        margin-right: 8px;
+        margin-right: 8px
     }
 
     .message-item.bot-message .message-avatar {
-        margin-left: 8px;
+        margin-left: 8px
     }
 
     .message-image {
-        max-width: 280px;
-        max-height: 160px;
+        max-width: min(280px, 66.67vw);
+        max-height: 160px
     }
 
     .quote-content .message-image {
-        max-width: 150px;
-        max-height: 80px;
+        max-width: min(150px, 50vw);
+        max-height: 80px
     }
 
     .context-menu {
         min-width: 160px;
         backdrop-filter: blur(12px);
-        -webkit-backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px)
     }
 
     .context-menu-item {
         padding: 14px 16px;
-        font-size: 16px;
+        font-size: 16px
     }
 
     .bot-item,
     .channel-item {
-        padding: 14px 16px;
+        padding: 14px 16px
     }
 
     .bot-avatar {
         width: 36px;
         height: 36px;
-        margin-right: 10px;
+        margin-right: 10px
     }
 
     .bot-name,
     .channel-name {
-        font-size: 15px;
+        font-size: 15px
     }
 
     .bot-platform,
     .channel-type {
-        font-size: 13px;
+        font-size: 13px
     }
 }
 
-@media (min-width: 769px) and (max-width: 1024px) {
+@media (min-width:769px) and (max-width:1024px) {
     .bot-list {
         width: 220px;
         min-width: 220px;
-        max-width: 220px;
+        max-width: 220px
     }
 
     .channel-list {
         width: 280px;
         min-width: 280px;
-        max-width: 280px;
+        max-width: 280px
     }
 
     .message-image {
-        max-width: 350px;
-        max-height: 180px;
+        max-width: min(350px, 66.67vw);
+        max-height: 180px
     }
 }
 
 .chat-container.swiping {
-    overflow: hidden;
+    overflow: hidden
 }
 
 .bot-list.swiping,
 .channel-list.swiping,
 .message-area.swiping {
-    transition: none !important;
+    transition: none !important
 }
 
 .swipe-indicator {
@@ -1494,7 +1507,7 @@ body.dragging-bubble-global {
     left: 20px;
     transform: translateY(-50%);
     background: rgba(33, 150, 243, .8);
-    color: white;
+    color: #fff;
     padding: 8px 12px;
     border-radius: 20px;
     font-size: 14px;
@@ -1503,25 +1516,24 @@ body.dragging-bubble-global {
     transition: opacity .2s ease;
     pointer-events: none;
     backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px)
 }
 
 .swipe-indicator.show {
-    opacity: 1;
+    opacity: 1
 }
 
 .message-area .message-content {
-    padding-bottom: 80px;
+    padding-bottom: 80px
 }
 
-/* 图片上传相关样式 */
 .image-preview-container {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     padding: 8px 0;
     margin-bottom: 8px;
-    border-bottom: 1px solid rgba(128, 128, 128, .1);
+    border-bottom: 1px solid rgba(128, 128, 128, .1)
 }
 
 .image-preview-item {
@@ -1531,14 +1543,14 @@ body.dragging-bubble-global {
     border-radius: 8px;
     overflow: hidden;
     border: 2px solid rgba(33, 150, 243, .3);
-    background: rgba(128, 128, 128, .1);
+    background: rgba(128, 128, 128, .1)
 }
 
 .preview-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
-    display: block;
+    display: block
 }
 
 .remove-image-btn {
@@ -1549,7 +1561,7 @@ body.dragging-bubble-global {
     height: 20px;
     border-radius: 50%;
     background: #f44336;
-    color: white;
+    color: #fff;
     border: none;
     cursor: pointer;
     display: flex;
@@ -1557,35 +1569,35 @@ body.dragging-bubble-global {
     justify-content: center;
     font-size: 12px;
     transition: all .2s ease;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .2)
 }
 
 .remove-image-btn:hover {
     background: #d32f2f;
-    transform: scale(1.1);
+    transform: scale(1.1)
 }
 
 .input-actions {
     position: relative;
-    margin-right: 8px;
+    margin-right: 8px
 }
 
 .add-button {
     width: 36px;
     height: 36px;
     border-radius: 12px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, #667eea 0, #764ba2 100%);
     border: none;
-    color: white;
+    color: #fff;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all .3s cubic-bezier(.4, 0, .2, 1);
     flex-shrink: 0;
-    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+    box-shadow: 0 2px 8px rgba(102, 126, 234, .3);
     position: relative;
-    overflow: hidden;
+    overflow: hidden
 }
 
 .add-button::before {
@@ -1595,30 +1607,30 @@ body.dragging-bubble-global {
     left: 0;
     right: 0;
     bottom: 0;
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
+    background: linear-gradient(135deg, rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .1) 100%);
     border-radius: 12px;
     opacity: 0;
-    transition: opacity .3s ease;
+    transition: opacity .3s ease
 }
 
 .add-button:hover {
     transform: translateY(-2px) scale(1.05);
-    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
+    box-shadow: 0 4px 16px rgba(102, 126, 234, .4)
 }
 
 .add-button:hover::before {
-    opacity: 1;
+    opacity: 1
 }
 
 .add-button.active {
-    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    background: linear-gradient(135deg, #f093fb 0, #f5576c 100%);
     transform: translateY(-2px) scale(1.05) rotate(45deg);
-    box-shadow: 0 4px 16px rgba(245, 87, 108, 0.4);
+    box-shadow: 0 4px 16px rgba(245, 87, 108, .4)
 }
 
 .add-button:active {
-    transform: translateY(0) scale(0.98);
-    transition: all .1s ease;
+    transform: translateY(0) scale(.98);
+    transition: all .1s ease
 }
 
 .action-menu {
@@ -1637,7 +1649,7 @@ body.dragging-bubble-global {
     min-width: 140px;
     transform: translateY(8px);
     opacity: 0;
-    animation: menuSlideIn .3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    animation: menuSlideIn .3s cubic-bezier(.4, 0, .2, 1) forwards
 }
 
 .action-menu-item {
@@ -1645,16 +1657,16 @@ body.dragging-bubble-global {
     align-items: center;
     gap: 12px;
     padding: 14px 18px;
-    background: none;
+    background: 0 0;
     border: none;
     color: #333;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
-    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all .2s cubic-bezier(.4, 0, .2, 1);
     width: 100%;
     text-align: left;
-    position: relative;
+    position: relative
 }
 
 .action-menu-item::before {
@@ -1664,209 +1676,203 @@ body.dragging-bubble-global {
     top: 0;
     bottom: 0;
     width: 3px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, #667eea 0, #764ba2 100%);
     transform: scaleY(0);
-    transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: transform .2s cubic-bezier(.4, 0, .2, 1)
 }
 
 .action-menu-item:hover {
-    background: linear-gradient(90deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
+    background: linear-gradient(90deg, rgba(102, 126, 234, .08) 0, rgba(118, 75, 162, .08) 100%);
     color: #667eea;
-    transform: translateX(4px);
+    transform: translateX(4px)
 }
 
 .action-menu-item:hover::before {
-    transform: scaleY(1);
+    transform: scaleY(1)
 }
 
 .action-menu-item svg {
-    flex-shrink: 0;
+    flex-shrink: 0
 }
 
-@media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme:dark) {
     .action-menu {
         background: rgba(30, 30, 30, .98);
-        box-shadow: 0 8px 32px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .2);
+        box-shadow: 0 8px 32px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .2)
     }
 
     .action-menu-item {
-        color: #fff;
+        color: #fff
     }
 
     .action-menu-item::before {
-        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+        background: linear-gradient(135deg, #4facfe 0, #00f2fe 100%)
     }
 
     .action-menu-item:hover {
-        background: linear-gradient(90deg, rgba(79, 172, 254, 0.12) 0%, rgba(0, 242, 254, 0.12) 100%);
-        color: #4facfe;
+        background: linear-gradient(90deg, rgba(79, 172, 254, .12) 0, rgba(0, 242, 254, .12) 100%);
+        color: #4facfe
     }
 
     .add-button {
-        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-        box-shadow: 0 2px 8px rgba(79, 172, 254, 0.3);
+        background: linear-gradient(135deg, #4facfe 0, #00f2fe 100%);
+        box-shadow: 0 2px 8px rgba(79, 172, 254, .3)
     }
 
     .add-button:hover {
-        box-shadow: 0 4px 16px rgba(79, 172, 254, 0.4);
+        box-shadow: 0 4px 16px rgba(79, 172, 254, .4)
     }
 
     .add-button.active {
-        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
-        box-shadow: 0 4px 16px rgba(250, 112, 154, 0.4);
+        background: linear-gradient(135deg, #fa709a 0, #fee140 100%);
+        box-shadow: 0 4px 16px rgba(250, 112, 154, .4)
     }
 
     .image-preview-item {
         border-color: rgba(100, 181, 246, .5);
-        background: rgba(255, 255, 255, .05);
+        background: rgba(255, 255, 255, .05)
     }
 }
 
-@media (max-width: 768px) {
+@media (max-width:768px) {
     .image-preview-container {
         padding: 6px 0;
-        margin-bottom: 6px;
+        margin-bottom: 6px
     }
 
     .image-preview-item {
         width: 50px;
-        height: 50px;
+        height: 50px
     }
 
     .add-button {
         width: 32px;
         height: 32px;
-        border-radius: 10px;
+        border-radius: 10px
     }
 
     .action-menu {
-        min-width: 100px;
+        min-width: 100px
     }
 
     .action-menu-item {
         padding: 10px 12px;
-        font-size: 13px;
+        font-size: 13px
     }
 
     .remove-image-btn {
         width: 18px;
         height: 18px;
         top: -5px;
-        right: -5px;
+        right: -5px
     }
 }
 
-/* 消息历史区域的滚动条 */
 .message-history::-webkit-scrollbar {
-    width: 6px;
+    width: 6px
 }
 
 .message-history::-webkit-scrollbar-track {
-    background: transparent;
+    background: 0 0
 }
 
 .message-history::-webkit-scrollbar-thumb {
     background-color: rgba(144, 147, 153, .3);
     border-radius: 4px;
-    transition: background-color .3s;
+    transition: background-color .3s
 }
 
 .message-history::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(144, 147, 153, .5);
+    background-color: rgba(144, 147, 153, .5)
 }
 
-/* 机器人列表的滚动条 */
 .bot-items::-webkit-scrollbar {
-    width: 6px;
+    width: 6px
 }
 
 .bot-items::-webkit-scrollbar-track {
-    background: transparent;
+    background: 0 0
 }
 
 .bot-items::-webkit-scrollbar-thumb {
     background-color: rgba(144, 147, 153, .3);
     border-radius: 4px;
-    transition: background-color .3s;
+    transition: background-color .3s
 }
 
 .bot-items::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(144, 147, 153, .5);
+    background-color: rgba(144, 147, 153, .5)
 }
 
-/* 频道列表的滚动条 */
 .channel-items::-webkit-scrollbar {
-    width: 6px;
+    width: 6px
 }
 
 .channel-items::-webkit-scrollbar-track {
-    background: transparent;
+    background: 0 0
 }
 
 .channel-items::-webkit-scrollbar-thumb {
     background-color: rgba(144, 147, 153, .3);
     border-radius: 4px;
-    transition: background-color .3s;
+    transition: background-color .3s
 }
 
 .channel-items::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(144, 147, 153, .5);
+    background-color: rgba(144, 147, 153, .5)
 }
 
-/* 合并转发消息展开区域的滚动条 */
 .forward-message-expanded::-webkit-scrollbar {
-    width: 6px;
+    width: 6px
 }
 
 .forward-message-expanded::-webkit-scrollbar-track {
-    background: transparent;
+    background: 0 0
 }
 
 .forward-message-expanded::-webkit-scrollbar-thumb {
     background-color: rgba(144, 147, 153, .3);
     border-radius: 4px;
-    transition: background-color .3s;
+    transition: background-color .3s
 }
 
 .forward-message-expanded::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(144, 147, 153, .5);
+    background-color: rgba(144, 147, 153, .5)
 }
 
-/* JSON内容区域的滚动条 */
 .json-raw-content::-webkit-scrollbar {
-    width: 6px;
+    width: 6px
 }
 
 .json-raw-content::-webkit-scrollbar-track {
-    background: transparent;
+    background: 0 0
 }
 
 .json-raw-content::-webkit-scrollbar-thumb {
     background-color: rgba(144, 147, 153, .3);
     border-radius: 4px;
-    transition: background-color .3s;
+    transition: background-color .3s
 }
 
 .json-raw-content::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(144, 147, 153, .5);
+    background-color: rgba(144, 147, 153, .5)
 }
 
-/* 深色模式下的滚动条样式调整 */
-@media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme:dark) {
 
-    .message-history::-webkit-scrollbar-thumb,
     .bot-items::-webkit-scrollbar-thumb,
     .channel-items::-webkit-scrollbar-thumb,
     .forward-message-expanded::-webkit-scrollbar-thumb,
-    .json-raw-content::-webkit-scrollbar-thumb {
-        background-color: rgba(255, 255, 255, .2);
+    .json-raw-content::-webkit-scrollbar-thumb,
+    .message-history::-webkit-scrollbar-thumb {
+        background-color: rgba(255, 255, 255, .2)
     }
 
-    .message-history::-webkit-scrollbar-thumb:hover,
     .bot-items::-webkit-scrollbar-thumb:hover,
     .channel-items::-webkit-scrollbar-thumb:hover,
     .forward-message-expanded::-webkit-scrollbar-thumb:hover,
-    .json-raw-content::-webkit-scrollbar-thumb:hover {
-        background-color: rgba(255, 255, 255, .4);
+    .json-raw-content::-webkit-scrollbar-thumb:hover,
+    .message-history::-webkit-scrollbar-thumb:hover {
+        background-color: rgba(255, 255, 255, .4)
     }
 }