@touchvue/chat 1.0.0-beta.3 → 1.0.0-beta.30

package/theme/components/index.css

@@ -1,1146 +1,1865 @@
-.ai-message {
+.touchchat {
+  --ai-gap: 0.5em;
+  --ai-justify: flex-start;
+  --ai-content-gap: 0.25em;
+  --ai-content-max-width: 75%;
+  --ai-avatar-pic-width: 2.5em;
+  --ai-avatar-pic-height: auto;
+  --ai-avatar-pic-radius: 50%;
+  --ai-bubble-bg: #fff;
+  --ai-bubble-color: #000;
+  --ai-bubble-padding: 1em 1.5em;
+  --ai-bubble-lh: 1.8em;
+  --ai-bubble-radius: 0.5em 0 0.5em 0.5em;
+  --ai-bubble-border: 1px solid #eaecf0;
+  --ai-bubble-arrow-left: calc(-0.5em + 1px);
+  --ai-bubble-arrow-top: 0;
+  --ai-bubble-arrow-width: 0.5em;
+  --ai-bubble-arrow-height: 1em;
+  --ai-bubble-arrow-bg: url(../img/aiArrow.png);
+  --ai-bubble-arrow-bg-size: 100% 100%;
+  --ai-bubble-text-size: 1.1em;
+  --ai-bubble-text-weight: normal;
+  --ai-bubble-text-family: inherit;
+  --ai-think-padding: 1em;
+  --ai-think-radius: 0.5em;
+  --ai-think-bg: #f7f8fa;
+  --ai-think-gap: 1em;
+  --ai-think-state-gap: 0.5em;
+  --ai-think-state-weight: bold;
+  --ai-think-state-color: inherit;
+  --ai-think-state-icon-size: 1em;
+  --ai-think-state-icon-family: 'touchchat-icon';
+  --ai-think-state-icon-color: var(--color-primary);
+  --ai-think-state-icon-content: '\e607';
+  --ai-think-toggle-width: 2em;
+  --ai-think-toggle-height: 2em;
+  --ai-think-toggle-radius: 0.25em;
+  --ai-think-toggle-color: inherit;
+  --ai-think-toggle-border: none;
+  --ai-think-toggle-bg: transparent;
+  --ai-think-toggle-size: 1em;
+  --ai-think-toggle-family: 'touchchat-icon';
+  --ai-think-toggle-content: '\e60b';
+  --ai-think-toggle-hover-color: var(--ai-think-toggle-color);
+  --ai-think-toggle-hover-bg: rgba(0, 0, 0, 0.1);
+  --ai-think-toggle-hover-border: var(--ai-think-toggle-border);
+  --ai-think-toggle-active-color: var(--ai-think-toggle-color);
+  --ai-think-toggle-active-bg: rgba(0, 0, 0, 0.3);
+  --ai-think-toggle-active-border: var(--ai-think-toggle-border);
+  --ai-think-toggle-expand-content: '\e60c';
+  --ai-loading-gap: 0.5em;
+  --ai-loading-color: var(--color-primary);
+  --ai-loading-width: 6em;
+  --ai-loading-icon-width: 1.5em;
+  --ai-loading-icon-height: 1.5em;
+  --ai-loading-icon-bg: url(../img/loading.png);
+  --ai-loading-icon-bg-size: 100% 100%;
+  --ai-loading-text-size: 1em;
+  --ai-loading-text-weight: normal;
+  --ai-loading-text-family: inherit;
+  --code-copy-border: 0 none;
+  --code-copy-top: 0.5em;
+  --code-copy-right: 0.5em;
+  --code-copy-padding: 0 0.5em;
+  --code-copy-height: 2em;
+  --code-copy-radius: 0.25em;
+  --code-copy-display-gap: 0.5em;
+  --code-copy-bg: none;
+  --code-copy-color: inherit;
+  --code-copy-icon-family: 'touchchat-icon';
+  --code-copy-icon-size: 1em;
+  --code-copy-icon-content: '\e603';
+  --code-copy-hover-bg: rgba(0, 0, 0, 0.1);
+  --code-copy-hover-color: var(--code-copy-color);
+  --code-copy-hover-border: var(--code-copy-border);
+  --code-copy-active-bg: rgba(0, 0, 0, 0.3);
+  --code-copy-active-color: var(--code-copy-color);
+  --code-copy-active-border: var(--code-copy-border);
+}
+.touchchat-ai {
+  display: flex;
+  gap: var(--ai-gap);
+  justify-content: var(--ai-justify);
+}
+.touchchat-ai-content {
+  order: 1;
   display: flex;
-  justify-content: flex-start;
-  margin-right: auto;
+  flex-direction: column;
+  gap: var(--ai-content-gap);
+  max-width: var(--ai-content-max-width);
 }
-.ai-message .message-content {
-  flex-direction: row;
-  display: flex;
-  align-items: flex-start;
+.touchchat-ai-content.is-full {
+  flex: 1;
 }
-.ai-message .text-content {
-  background-color: #ffffff;
-  display: flex;
+.touchchat-ai-bubble {
+  flex: 1;
+  background: var(--ai-bubble-bg);
+  color: var(--ai-bubble-color);
+  padding: var(--ai-bubble-padding);
+  line-height: var(--ai-bubble-lh);
+  border-radius: var(--ai-bubble-radius);
   position: relative;
-  border-radius: 0 0.75em 0.75em 0.75em;
-  border: 1px solid var(--Border-Border-, #eaecf0);
-  margin-right: 0;
-  margin-left: 0.5em;
-  padding: 0.75em 1em;
 }
-.ai-message .text-content::after {
-  background: url('./aiChat/img/left.png') no-repeat;
+.touchchat-ai-bubble:before {
+  content: '';
+  position: absolute;
+  display: block;
+  left: var(--ai-bubble-arrow-left);
+  z-index: 2;
+  top: var(--ai-bubble-arrow-top);
+  width: var(--ai-bubble-arrow-width);
+  height: var(--ai-bubble-arrow-height);
+  background: var(--ai-bubble-arrow-bg);
+  background-size: var(--ai-bubble-arrow-bg-size);
+}
+.touchchat-ai-bubble:after {
+  pointer-events: none;
   content: '';
-  background-size: 100% 100%;
-  width: 1em;
-  height: 0.75em;
-  display: inline-block;
   position: absolute;
-  top: -0.0625em;
-  left: -1em;
-  border: 0;
-  transform: rotate(0);
+  inset: 0;
+  border-radius: 0 0.5em 0.5em 0.5em;
+  border: var(--ai-bubble-border);
+}
+.no-bobble-border {
+  padding: 0;
+}
+.no-bobble-border:after {
+  display: none;
+}
+.no-bobble-border:before {
+  display: none;
+}
+.touchchat-ai-avatar-pic {
+  width: var(--ai-avatar-pic-width);
+  height: var(--ai-avatar-pic-height);
+  border-radius: var(--ai-avatar-pic-radius);
+  order: 2;
+}
+.touchchat-ai-bubble-text {
+  font-size: var(--ai-bubble-text-size);
+  font-weight: var(--ai-bubble-text-weight);
+  font-family: var(--ai-bubble-text-family);
+}
+.touchchat-markdown hr {
+  margin: 1em 0;
+  border: 0 none;
+  border-top: 1px solid #eee;
+}
+.touchchat-markdown p:not(:first-child):not(:last-child) {
+  margin: 1em 0;
+}
+.touchchat-markdown ol,
+.touchchat-markdown ul {
+  margin: 1em 0 1em 2em;
 }
-.reasoning-content {
+.touchchat-markdown ol li:not(:first-child),
+.touchchat-markdown ul li:not(:first-child) {
+  margin-top: 0.5em;
+}
+.touchchat-markdown pre {
+  margin: 1em 0;
+}
+.touchchat-markdown h1 {
+  margin: 0.5em 0;
+}
+.touchchat-markdown h2 {
+  margin: 1em 0 0.5em 0;
+}
+.touchchat-ai-think {
+  padding: var(--ai-think-padding);
+  margin-top: 0.5em;
+  margin-bottom: 1em;
+  border-radius: var(--ai-think-radius);
+  background: var(--ai-think-bg);
   display: flex;
-  justify-content: center;
-  align-items: flex-start;
   flex-direction: column;
-  padding: 0.875em;
-  gap: 0.875em;
-  border-radius: 0.5em;
-  background: var(--Fill-Fill--, #f7f8fa);
-  margin-bottom: 0.5em;
-  color: var(--text-icon-text-icon, #1d2129);
-  /* Body 正文/Medium */
-  font-family: 'PingFang SC';
-  font-size: 0.875em;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.375em;
-  /* 157.143% */
+  gap: var(--ai-think-gap);
 }
-.reasoning-content .reasoning-header {
+.touchchat-ai-think p:not(:first-child):not(:last-child) {
+  margin: 1em 0;
+}
+.touchchat-ai-think-header {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-direction: row;
-  align-self: stretch;
-  min-width: 12em;
 }
-.reasoning-content .reasoning-header .reasoning-status {
+.touchchat-ai-think-state {
   display: flex;
-  justify-content: flex-start;
+  flex: 1;
   align-items: center;
-  flex-direction: row;
-}
-.reasoning-content .reasoning-header .status-text {
-  color: var(--text-icon-text-icon, #1d2129);
-  text-align: center;
-  font-family: 'PingFang SC';
-  font-size: 0.75em;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 0.875em;
-  /* 116.667% */
-  margin-left: 0.125em;
+  gap: var(--ai-think-state-gap);
+  font-weight: var(--ai-think-state-weight);
+  color: var(--ai-think-state-color);
+}
+.touchchat-ai-think-state:before {
+  font-weight: normal;
+  font-family: var(--ai-think-state-icon-family);
+  color: var(--ai-think-state-icon-color);
+  content: var(--ai-think-state-icon-content);
+  font-size: var(--ai-think-state-icon-size);
+}
+.touchchat-ai-think-toggle {
+  width: var(--ai-think-toggle-width);
+  height: var(--ai-think-toggle-height);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--ai-think-toggle-radius);
+  color: var(--ai-think-toggle-color);
+  border: var(--ai-think-toggle-border);
+  background: var(--ai-think-toggle-bg);
 }
-.reasoning-content .reasoning-header .folding {
-  cursor: pointer;
-  transition: transform 0.3s ease;
+.touchchat-ai-think-toggle:hover {
+  color: var(--ai-think-toggle-hover-color);
+  background: var(--ai-think-toggle-hover-bg);
+  border: var(--ai-think-toggle-hover-border);
 }
-.reasoning-content .reasoning-header .folding.rotate {
-  transform: rotate(180deg);
+.touchchat-ai-think-toggle:active {
+  color: var(--ai-think-toggle-active-color);
+  background: var(--ai-think-toggle-active-bg);
+  border: var(--ai-think-toggle-active-border);
 }
-.reasoning-content .reasoning-header .folding:hover {
-  opacity: 0.8;
-  background-color: #eeeeee;
+.touchchat-ai-think-toggle.is-expand:before {
+  transform: rotate(180);
 }
-.reasoning-content .reasoning-header .folding.fold-active {
-  transform: rotate(180deg);
+.touchchat-ai-think-toggle-icon:before {
+  font-family: var(--ai-think-toggle-family);
+  content: var(--ai-think-toggle-content);
+  font-size: var(--ai-think-toggle-size);
 }
-.reasoning-content ul,
-.reasoning-content ol {
-  padding-left: 1.5em;
-  margin: 0.5em 0;
+.touchchat-ai-loading {
+  display: flex;
+  gap: var(--ai-loading-gap);
+  align-items: center;
+  color: var(--ai-loading-color);
+  width: var(--ai-loading-width);
 }
-.reasoning-content ul li,
-.reasoning-content ol li {
-  margin-left: 0;
-  padding-left: 0.5em;
-  word-wrap: break-word;
+.touchchat-ai-loading-icon {
+  content: '';
+  display: inline-block;
+  width: var(--ai-loading-icon-width);
+  height: var(--ai-loading-icon-height);
+  background: var(--ai-loading-icon-bg);
+  background-size: var(--ai-loading-icon-bg-size);
+  animation: 0.5s loading steps(32) infinite;
+}
+.touchchat-ai-loading-text {
+  font-size: var(--ai-loading-text-size);
+  font-weight: var(--ai-loading-text-weight);
+  font-family: var(--ai-loading-text-family);
+}
+.touchchat-code-copy {
+  border: var(--code-copy-border);
+  position: absolute;
+  top: var(--code-copy-top);
+  right: var(--code-copy-right);
+  padding: var(--code-copy-padding);
+  height: var(--code-copy-height);
+  border-radius: var(--code-copy-radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--code-copy-bg);
+  gap: var(--code-copy-display-gap);
+  cursor: default;
+  color: var(--code-copy-color);
 }
-.reasoning-content p {
-  margin: 0 0 0.5em 0;
-  line-height: 1.5;
+.touchchat-code-copy:before {
+  content: var(--code-copy-icon-content);
+  font-family: var(--code-copy-icon-family);
+  font-size: var(--code-copy-icon-size);
 }
-.reasoning-content p:last-child {
-  margin-bottom: 0;
+.touchchat-code-copy:hover {
+  background: var(--code-copy-hover-bg);
+  color: var(--code-copy-hover-color);
+  border: var(--code-copy-hover-border);
 }
-.reasoning-content > div {
-  width: 100%;
-  box-sizing: border-box;
+.touchchat-code-copy:active {
+  background: var(--code-copy-active-bg);
+  color: var(--code-copy-active-color);
+  border: var(--code-copy-active-border);
 }
-.reasoning-collapse-enter-active,
-.reasoning-collapse-leave-active {
+.touchchat-ai-think-collpase-enter-active,
+.touchchat-ai-think-collpase-leave-active {
   transition: max-height 0.3s ease, opacity 0.3s ease;
-  max-height: 31.25em;
+  max-height: 30em;
   overflow: hidden;
 }
-.reasoning-collapse-enter-from,
-.reasoning-collapse-leave-to {
+.touchchat-ai-think-collpase-enter-from,
+.touchchat-ai-think-collpase-leave-to {
   max-height: 0;
   opacity: 0;
   overflow: hidden;
 }
-.ai-message .loading-indicator {
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.hljs {
+  border-radius: 0.5em;
+  padding: 0.5em 1em;
+}
+.touchchat {
+  --edit-margin: 0;
+  --edit-padding: 0.75em;
+  --edit-gap: 1em;
+  --edit-border: 1px solid #ddd;
+  --edit-radius: 0.5em;
+  --edit-focus-border: 1px solid var(--color-primary);
+  --edit-input-size: 1em;
+  --edit-input-bg: none;
+  --edit-input-lh: 1.5em;
+  --edit-input-padding: 1em;
+  --edit-submit-padding: 0 0.5em 0.5em;
+  --edit-submit-gap: 0.5em;
+  --edit-attach-width: 2.5em;
+  --edit-attach-height: 2.5em;
+  --edit-attach-bg: #fff;
+  --edit-attach-border: 1px solid #ddd;
+  --edit-attach-radius: 0.25em;
+  --edit-attach-color: inherit;
+  --edit-attach-size: 1em;
+  --edit-attach-family: 'touchchat-icon';
+  --edit-attach-content: '\e610';
+  --edit-attach-hover-bg: rgba(0, 0, 0, 0.1);
+  --edit-attach-hover-color: var(--edit-attach-color);
+  --edit-attach-hover-border: #0062d6;
+  --edit-attach-active-bg: rgba(0, 0, 0, 0.3);
+  --edit-attach-active-color: var(--edit-attach-color);
+  --edit-attach-active-border: var(--edit-attach-border);
+  --edit-think-height: 2.5em;
+  --edit-think-padding: 0 1em;
+  --edit-think-bg: #fff;
+  --edit-think-border: 1px solid #ddd;
+  --edit-think-radius: 0.25em;
+  --edit-think-color: inherit;
+  --edit-think-gap: 0.5em;
+  --edit-think-size: 1em;
+  --edit-think-icon-size: var(--edit-think-size);
+  --edit-think-family: 'touchchat-icon';
+  --edit-think-content: '\e73e';
+  --edit-think-hover-bg: rgba(0, 0, 0, 0.1);
+  --edit-think-hover-color: var(--edit-think-color);
+  --edit-think-hover-border: var(--edit-think-border);
+  --edit-think-active-bg: rgba(0, 0, 0, 0.3);
+  --edit-think-active-color: var(--edit-think-color);
+  --edit-think-active-border: var(--edit-think-border);
+  --edit-think-on-border: 1px solid var(--color-primary);
+  --edit-think-on-color: var(--color-primary);
+  --edit-think-on-bg: var(--edit-think-bg);
+  --edit-think-on-hover-bg: var(--edit-think-hover-bg);
+  --edit-think-on-hover-color: var(--edit-think-on-color);
+  --edit-think-on-hover-border: var(--edit-think-on-border);
+  --edit-think-on-active-bg: var(--edit-think-active-bg);
+  --edit-think-on-active-color: var(--edit-think-on-color);
+  --edit-think-on-active-border: var(--edit-think-on-border);
+  --edit-delete-height: 2.5em;
+  --edit-delete-padding: 0 1em;
+  --edit-delete-bg: #fff;
+  --edit-delete-border: 1px solid #ddd;
+  --edit-delete-radius: 0.25em;
+  --edit-delete-color: inherit;
+  --edit-delete-gap: 0.5em;
+  --edit-delete-size: 1em;
+  --edit-delete-icon-size: var(--edit-delete-size);
+  --edit-delete-family: 'touchchat-icon';
+  --edit-delete-content: '\e73d';
+  --edit-screenshot-height: 2.5em;
+  --edit-screenshot-padding: 0 1em;
+  --edit-screenshot-bg: #fff;
+  --edit-screenshot-border: 1px solid #ddd;
+  --edit-screenshot-radius: 0.25em;
+  --edit-screenshot-color: inherit;
+  --edit-screenshot-gap: 0.5em;
+  --edit-screenshot-size: 1em;
+  --edit-screenshot-icon-size: var(--edit-screenshot-size);
+  --edit-screenshot-family: 'touchchat-icon';
+  --edit-screenshot-content: '\e73c';
+  --edit-voice-height: 2.5em;
+  --edit-voice-padding: 0 1em;
+  --edit-voice-bg: #fff;
+  --edit-voice-border: 1px solid #ddd;
+  --edit-voice-radius: 0.25em;
+  --edit-voice-color: inherit;
+  --edit-voice-gap: 0.5em;
+  --edit-voice-size: 1em;
+  --edit-voice-icon-size: var(--edit-voice-size);
+  --edit-voice-family: 'touchchat-icon';
+  --edit-voice-content: '\e73b';
+  --edit-record-height: 2.5em;
+  --edit-record-padding: 0 1em;
+  --edit-record-bg: #fff;
+  --edit-record-border: 1px solid #ddd;
+  --edit-record-radius: 0.25em;
+  --edit-record-color: inherit;
+  --edit-record-gap: 0.5em;
+  --edit-record-size: 1em;
+  --edit-record-icon-size: var(--edit-record-size);
+  --edit-record-family: 'touchchat-icon';
+  --edit-record-content: '\e739';
+  --edit-send-width: 2.5em;
+  --edit-send-height: 2.5em;
+  --edit-send-bg: var(--color-primary);
+  --edit-send-border: 0 none;
+  --edit-send-radius: 0.25em;
+  --edit-send-color: #fff;
+  --edit-send-size: 1em;
+  --edit-send-family: 'touchchat-icon';
+  --edit-send-content: '\e609';
+  --edit-send-hover-bg: #2e91ff;
+  --edit-send-hover-color: var(--edit-send-color);
+  --edit-send-hover-border: var(--edit-send-border);
+  --edit-send-active-bg: #005fc7;
+  --edit-send-active-color: var(--edit-send-color);
+  --edit-send-active-border: var(--edit-send-border);
+  --edit-stop-width: 2.5em;
+  --edit-stop-height: 2.5em;
+  --edit-stop-bg: #333333;
+  --edit-stop-border: 0 none;
+  --edit-stop-radius: 0.25em;
+  --edit-stop-color: #fff;
+  --edit-stop-size: 1em;
+  --edit-stop-family: 'touchchat-icon';
+  --edit-stop-content: '\e60f';
+  --edit-stop-hover-bg: #4d4d4d;
+  --edit-stop-hover-color: var(--edit-stop-color);
+  --edit-stop-hover-border: var(--edit-stop-border);
+  --edit-stop-active-bg: #1a1a1a;
+  --edit-stop-active-color: var(--edit-stop-color);
+  --edit-stop-active-border: var(--edit-stop-border);
+}
+.touchchat-edit {
+  margin: var(--edit-margin);
+  padding: var(--edit-padding);
+  display: flex;
+  flex-direction: column;
+  gap: var(--edit-gap);
+  border: var(--edit-border);
+  border-radius: var(--edit-radius);
+  overflow: visible;
+}
+.touchchat-edit:has(textarea:focus) {
+  border: var(--edit-focus-border);
+}
+.touchchat-edit-mark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  border-radius: 0.5em;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(0.625em);
   display: flex;
   justify-content: center;
-  padding: 0.625em 0;
-  margin-top: 0.625em;
+  align-items: center;
 }
-.ai-message .loading-indicator svg {
-  width: 1.5em;
-  height: 1.5em;
-  opacity: 0.6;
-  color: #10b981 !important;
+.touchchat-edit-mark > div {
+  width: 50%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
-.ai-message .msg-rich-text.markdown {
-  color: var(--text-icon-text-icon, #1d2129);
-  /* Body 正文/Medium */
+.touchchat-edit-mark p {
   font-family: 'PingFang SC';
   font-size: 0.875em;
   font-style: normal;
-  font-weight: 400;
   line-height: 1.375em;
-  /* 157.143% */
+  text-align: center;
 }
-.ai-message .msg-rich-text.markdown h1,
-.reasoning-content h1 {
-  margin: 1.5em 0;
+.touchchat-edit-mark .touchchat-edit-title {
+  color: var(--text-icon-text-icon, #1d2129);
+  font-weight: 600;
+  margin: 0.5em 0;
 }
-.ai-message .msg-rich-text.markdown h2,
-.reasoning-content h2 {
-  margin: 1.2em 0;
+.touchchat-edit-mark .touchchat-edit-text {
+  color: var(--text-icon-text-icon, #86909c);
+  font-weight: 400;
 }
-.ai-message .msg-rich-text.markdown h3,
-.reasoning-content h3 {
-  margin: 1em 0;
+.touchchat-edit-input {
+  border: 0 none;
+  background: var(--edit-input-bg);
 }
-.ai-message .msg-rich-text.markdown h4,
-.ai-message .msg-rich-text.markdown h5,
-.ai-message .msg-rich-text.markdown h6,
-.reasoning-content h4,
-.reasoning-content h5,
-.reasoning-content h6 {
-  margin: 0.8em 0;
+.touchchat-edit-input textarea {
+  resize: none;
+  vertical-align: top;
+  font-family: inherit;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border: 0 none;
+  line-height: var(--edit-input-lh);
+  font-size: var(--edit-input-size);
 }
-.loading-indicator {
+.touchchat-edit-submit {
   display: flex;
+  justify-content: space-between;
+}
+.touchchat-edit-submit-left {
+  display: inline-flex;
+  gap: var(--edit-submit-gap);
+}
+.touchchat-edit-submit-right {
+  display: inline-flex;
+  gap: var(--edit-submit-gap);
+}
+.touchchat-edit-attach {
+  border: var(--edit-attach-border);
+  width: var(--edit-attach-width);
+  height: var(--edit-attach-height);
+  background: var(--edit-attach-bg);
+  display: inline-flex;
   align-items: center;
-  margin-left: 1.5em;
-  margin-top: 0.25em;
-  color: #86909c;
-  font-size: 0.75em;
+  justify-content: center;
+  border-radius: var(--edit-attach-radius);
+  color: var(--edit-attach-color);
+  position: relative;
 }
-.loading-indicator .loading-spin {
-  animation: spin 1.5s linear infinite;
-  margin-right: 0.25em;
+.touchchat-edit-attach:hover {
+  background: var(--edit-attach-hover-bg);
+  color: var(--edit-attach-hover-color);
+  border: var(--edit-attach-hover-border);
 }
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.touchchat-edit-attach:active {
+  background: var(--edit-attach-active-bg);
+  color: var(--edit-attach-active-color);
+  border: var(--edit-attach-active-border);
 }
-.loading-text {
-  color: var(--Brand-Brand-, #0077fa);
-  /* Body 正文/Medium */
-  font-family: 'PingFang SC';
-  font-size: 0.75em;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.375em;
-  /* 157.143% */
+.touchchat-edit-attach.is-dis {
+  opacity: 0.4;
+  pointer-events: none;
 }
-.ai-actions-container {
-  padding: 0.5em;
+.touchchat-edit-attach-icon:before {
+  font-size: var(--edit-attach-size);
+  font-family: var(--edit-attach-family);
+  content: var(--edit-attach-content);
 }
-.ai-actions-container .ai-actions {
-  display: flex;
-  justify-content: flex-start;
-  flex-wrap: wrap;
+.touchchat-edit-attach-tip {
+  display: none;
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 1em;
+  border-radius: 0.25em;
+  margin-bottom: 0.5em;
+  width: 20em;
+  height: 6em;
 }
-.ai-actions-container .ai-actions .action-btn {
-  position: relative;
-  /* 新增：作为定位容器 */
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  /* 新增：确保图标居中 */
-  cursor: pointer;
-  transition: all 0.2s ease;
-  /* 确保SVG图标居中且不影响定位 */
+.touchchat-edit-attach-tip p {
+  text-align: left;
+}
+.touchchat-edit-voice-tip {
+  left: -100%;
+  width: 6em;
+  height: auto;
+}
+.touchchat-edit-voice-tip p {
+  text-align: center;
 }
-.ai-actions-container .ai-actions .action-btn .btn-text {
-  /* 修改：从默认隐藏改为绝对定位 */
+/* 创建小箭头 */
+.touchchat-edit-attach-tip::before,
+.touchchat-edit-attach-tip::after {
+  content: '';
   position: absolute;
-  top: -2.2em;
-  /* 向上偏移显示 */
-  left: 50%;
+  left: 1.25em;
   transform: translateX(-50%);
-  /* 水平居中 */
-  display: none;
-  padding: 0.25em 0.5em;
-  background-color: #000;
-  /* 黑色背景 */
-  color: #fff;
-  /* 白色文字 */
-  font-size: 0.75em;
-  border-radius: 0.25em;
-  /* 圆角效果 */
-  white-space: nowrap;
-  box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.2);
-  /* 可选：添加阴影增强立体感 */
-  z-index: 10;
-  /* 确保显示在最上层 */
 }
-.ai-actions-container .ai-actions .action-btn .btn-text::after {
+/* 创建小箭头 */
+.touchchat-edit-voice-tip::before,
+.touchchat-edit-voice-tip::after {
   content: '';
   position: absolute;
-  bottom: -0.2em;
-  /* 定位在提示框底部 */
   left: 50%;
   transform: translateX(-50%);
-  border-width: 0.25em 0.25em 0;
-  border-style: solid;
-  border-color: #000 transparent transparent;
 }
-.ai-actions-container .ai-actions .action-btn:hover {
-  /* 保留SVG原有悬浮效果 */
+@keyframes lightUp {
+  0% {
+    stroke-opacity: 0.2;
+  }
+  20% {
+    stroke-opacity: 1;
+  }
+  100% {
+    stroke-opacity: 0.2;
+  }
 }
-.ai-actions-container .ai-actions .action-btn:hover .btn-text {
-  display: inline-block;
-  /* 悬浮时显示文字 */
+/* 为每根竖线添加动画，设置不同的延迟时间 */
+.touchchat-voice-bar-1 {
+  animation: lightUp 2s infinite;
 }
-.ai-actions-container .ai-actions .action-btn:hover svg {
-  background-color: #eeeeee;
-  border-radius: 50%;
+.touchchat-voice-bar-2 {
+  animation: lightUp 2s infinite;
+  animation-delay: 0.4s;
 }
-.ai-actions-container .ai-actions .action-btn svg {
-  flex-shrink: 0;
-  transition: all 0.2s ease;
+.touchchat-voice-bar-3 {
+  animation: lightUp 2s infinite;
+  animation-delay: 0.8s;
 }
-.input-area-fixed {
-  background-color: #ffffff;
-  padding: 1em;
-  flex-shrink: 0;
+.touchchat-voice-bar-4 {
+  animation: lightUp 2s infinite;
+  animation-delay: 1.2s;
 }
-.input-area {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5em;
+.touchchat-voice-bar-5 {
+  animation: lightUp 2s infinite;
+  animation-delay: 1.6s;
 }
-.input-container {
-  display: flex;
-  align-items: center;
-  gap: 0.5em;
+/* 语音波形起伏动画：每个波形高度随机变化，模拟实时声音波动 */
+@keyframes wavePulse {
+  0%,
+  100% {
+    height: 8px;
+    y: -4px;
+  }
+  25% {
+    height: 4px;
+    y: -2px;
+  }
+  50% {
+    height: 12px;
+    y: -6px;
+  }
+  75% {
+    height: 6px;
+    y: -3px;
+  }
 }
-textarea {
-  flex: 1;
-  padding: 0.5em;
-  border: 1px solid #d8dce4;
-  border-radius: 0.25em;
-  resize: none;
+/* 按钮呼吸阴影：增强交互感，暗示“可点击”状态 */
+@keyframes shadowBreath {
+  0%,
+  100% {
+    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
+  }
+  50% {
+    filter: drop-shadow(0 3px 4px rgba(64, 158, 255, 0.3));
+  }
 }
-textarea:focus {
-  border: 1px solid #0077fa;
-  outline: none;
+/* 为不同波形添加动画延迟，避免同步起伏，更真实 */
+.touchchat-edit-rlvoice-wave-1 {
+  animation: wavePulse 1.2s ease-in-out infinite;
 }
-.send-button {
-  padding: 0.5em 0.75em;
-  color: white;
-  border: none;
-  border-radius: 0.25em;
-  cursor: pointer;
-  white-space: nowrap;
-  background-color: #0077fa;
+.touchchat-edit-rlvoice-wave-2 {
+  animation: wavePulse 1.5s ease-in-out infinite 0.2s;
 }
-.send-button:disabled {
-  background-color: #b0bec5;
-  cursor: not-allowed;
-  opacity: 0.6;
+.touchchat-edit-rlvoice-wave-3 {
+  animation: wavePulse 1.1s ease-in-out infinite 0.4s;
 }
-.stop-button {
-  padding: 0.5em 0.75em;
-  color: white;
-  border: none;
-  border-radius: 0.25em;
-  cursor: pointer;
-  white-space: nowrap;
-  background-color: #ef4444;
-  margin-top: 0.5em;
+.touchchat-edit-rlvoice-wave-4 {
+  animation: wavePulse 1.3s ease-in-out infinite 0.1s;
 }
-.square-icon-btn {
-  width: 2em;
-  height: 2em;
-  border-radius: 0.5em;
-  background-color: #0077fa;
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  padding: 0;
-  margin-left: 0.5em;
+.touchchat-edit-rlvoice-wave-5 {
+  animation: wavePulse 1.4s ease-in-out infinite 0.3s;
 }
-.square-icon-btn:hover {
-  background-color: #0055cc;
+.touchchat-edit-rlvoice-wave-6 {
+  animation: wavePulse 1.2s ease-in-out infinite 0.5s;
 }
-.vertical-input-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.625em;
-  width: 100%;
-  padding: 0.75em;
-  background-color: #ffffff;
-  border: 1px solid #e5e5e5;
-  border-radius: 0.5em;
-  border: 0.5px solid var(--Border-Border-, #d8dce4);
-  box-shadow: 0 0.125em 0.375em 0 rgba(0, 0, 0, 0.1);
+/* 麦克风主体添加呼吸阴影 */
+.touchchat-edit-rlvoice-mic-body {
+  animation: shadowBreath 2s ease-in-out infinite;
 }
-.input-buttons {
-  display: flex;
-  justify-content: flex-end;
+/* 小箭头外框 */
+.touchchat-edit-attach-tip::before {
+  top: 100%;
+  border-width: 0.375em;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
 }
-.rounded-input {
-  border: none !important;
-  outline: none;
-  line-height: 1.375 !important;
-  resize: none !important;
-  box-shadow: none !important;
+.touchchat-edit-attach-tip::after {
+  top: calc(100% - 1px);
+  border-width: 0.375em;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
 }
-.deep-thinking-btn {
-  display: inline-flex;
+.touchchat-edit-attach:hover .touchchat-edit-attach-tip {
+  display: block;
+}
+.touchchat-edit-think {
+  border: var(--edit-think-border);
+  height: var(--edit-think-height);
+  padding: var(--edit-think-padding);
+  background: var(--edit-think-bg);
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0.375em 0.75em;
-  border-radius: 0.25em;
-  border: 1px solid #e5e6eb;
-  background-color: #ffffff;
-  color: #4e5969;
-  font-size: 0.875em;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  margin-right: 0.75em;
-}
-.deep-thinking-btn svg {
-  margin-right: 0.25em;
-}
-.deep-thinking-btn.active {
-  border: 1px solid var(--Brand-Brand-, #0062d6);
-  background: var(--Neutral-colors-White, #fff);
-  color: var(--Brand-Brand-, #0062d6);
-}
-.deep-thinking-btn.disabled {
-  color: #c9cdd4;
-  cursor: not-allowed;
-  border: 1px solid var(--Border-Border-, #d8dce4);
-  background: var(--Fill-Fill--, #f7f8fa);
+  border-radius: var(--edit-think-radius);
+  color: var(--edit-think-color);
+  gap: var(--edit-think-gap);
+}
+.touchchat-edit-think:hover {
+  background: var(--edit-think-hover-bg);
+  color: var(--edit-think-hover-color);
+  border: var(--edit-think-hover-border);
+}
+.touchchat-edit-think:active {
+  background: var(--edit-think-active-bg);
+  color: var(--edit-think-active-color);
+  border: var(--edit-think-active-border);
+}
+.touchchat-edit-think.is-dis {
+  opacity: 0.4;
+  pointer-events: none;
 }
-.controls-container {
-  display: flex;
+.touchchat-edit-think.is-on {
+  background: var(--edit-think-on-bg);
+  color: var(--edit-think-on-color);
+  border: var(--edit-think-on-border);
+}
+.touchchat-edit-think.is-on:hover {
+  background: var(--edit-think-on-hover-bg);
+  color: var(--edit-think-on-hover-color);
+  border: var(--edit-think-on-hover-border);
+}
+.touchchat-edit-think.is-on:active {
+  background: var(--edit-think-on-active-bg);
+  color: var(--edit-think-on-active-color);
+  border: var(--edit-think-on-active-border);
+}
+.touchchat-edit-think-icon:before {
+  font-size: var(--edit-think-icon-size);
+  font-family: var(--edit-think-family);
+  content: var(--edit-think-content);
+}
+.touchchat-edit-delete-icon:before {
+  font-size: var(--edit-delete-icon-size);
+  font-family: var(--edit-delete-family);
+  content: var(--edit-delete-content);
+}
+.touchchat-edit-screenshot-icon:before {
+  font-size: var(--edit-screenshot-icon-size);
+  font-family: var(--edit-screenshot-family);
+  content: var(--edit-screenshot-content);
+}
+.touchchat-edit-voice-icon:before {
+  font-size: var(--edit-voice-icon-size);
+  font-family: var(--edit-voice-family);
+  content: var(--edit-voice-content);
+}
+.touchchat-edit-record-icon:before {
+  font-size: var(--edit-record-icon-size);
+  font-family: var(--edit-record-family);
+  content: var(--edit-record-content);
+}
+.touchchat-edit-think-text {
+  font-size: var(--edit-think-size);
+}
+.touchchat-edit-send {
+  border: var(--edit-send-border);
+  height: var(--edit-send-height);
+  width: var(--edit-send-width);
+  font-size: var(--edit-send-size);
+  background: var(--edit-send-bg);
+  color: var(--edit-send-color);
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 0.5em 0 0;
+  justify-content: center;
+  border-radius: var(--edit-send-radius);
+}
+.touchchat-edit-send:hover {
+  background: var(--edit-send-hover-bg);
+  color: var(--edit-send-hover-color);
+  border: var(--edit-send-hover-border);
+}
+.touchchat-edit-send:active {
+  background: var(--edit-send-active-bg);
+  color: var(--edit-send-active-color);
+  border: var(--edit-send-active-border);
+}
+.touchchat-edit-send-icon:before {
+  font-size: var(--edit-send-size);
+  font-family: var(--edit-send-family);
+  content: var(--edit-send-content);
+}
+.touchchat-edit-stop {
+  border: var(--edit-stop-border);
+  height: var(--edit-stop-height);
+  width: var(--edit-stop-width);
+  font-size: var(--edit-stop-size);
+  background: var(--edit-stop-bg);
+  color: var(--edit-stop-color);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--edit-stop-radius);
 }
-.not-is-thinking {
-  justify-content: flex-end;
+.touchchat-edit-stop:hover {
+  background: var(--edit-stop-hover-bg);
+  color: var(--edit-stop-hover-color);
+  border: var(--edit-stop-hover-border);
 }
-.deep-thinking-btn:hover {
-  opacity: 0.8;
+.touchchat-edit-stop:active {
+  background: var(--edit-stop-active-bg);
+  color: var(--edit-stop-active-color);
+  border: var(--edit-stop-active-border);
 }
-.chat-container {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  width: 100%;
-  overflow: hidden;
+.touchchat-edit-stop-icon:before {
+  font-size: var(--edit-stop-size);
+  font-family: var(--edit-stop-family);
+  content: var(--edit-stop-content);
 }
-.chat-messages {
+.touchchat-dialog {
   flex: 1;
   overflow-y: auto;
   padding: 1em;
   display: flex;
   flex-direction: column;
 }
-.ai-message,
-.user-message {
+.touchchat-welcome {
   width: 100%;
-  box-sizing: border-box;
-}
-.ai-message .message-content,
-.user-message .message-content {
   height: 100%;
-  overflow-y: auto;
-  width: 100%;
-  padding-right: 0.5em;
-  max-width: 90%;
-}
-.ai-message .text-content {
-  border-radius: 0 0.75em 0.75em 0.75em;
-}
-.user-message .text-content {
-  border-radius: 0.75em 0 0.75em 0.75em;
-}
-.to-chat-item {
-  margin-bottom: 1.25em;
-}
-.message-content {
   display: flex;
-  align-items: flex-start;
-  max-width: 80%;
-}
-.avatar {
-  width: 2.5em;
-  height: 2.5em;
-  border-radius: 50%;
-}
-.text-content {
-  padding: 0.5em 0.75em;
-  border-radius: 0.5em;
-  margin: 0;
-}
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-@keyframes blink {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.loading-icon {
-  width: 1.25em;
-  height: 1.25em;
-  animation: spin 1s linear infinite;
-}
-.cursor-blink {
-  animation: blink 1s infinite;
-  display: inline-block;
-  vertical-align: bottom;
-}
-.msg-rich-text {
-  word-break: break-word;
-  padding-left: 1em;
-  margin-left: -1em;
-}
-.msg-rich-text ul,
-.msg-rich-text ol {
-  padding-left: 1.5em;
-  margin-left: 0;
-  margin-bottom: 1em;
-}
-.msg-rich-text li {
-  margin-bottom: 0.5em;
+  justify-content: center;
+  align-items: center;
 }
-.msg-rich-text p {
-  line-height: 1.6;
+.touchchat-dialog-content {
+  margin: 0 auto;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
 }
-.msg-rich-text table {
+table.touchchat-table {
   width: 100%;
   border-collapse: separate;
   margin: 1em 0;
   font-size: 0.9em;
 }
-.msg-rich-text table th,
-.msg-rich-text table td {
+table.touchchat-table th,
+table.touchchat-table td {
   padding: 0.75em 1em;
   border: 1px solid #ddd;
   text-align: left;
   vertical-align: top;
 }
-.msg-rich-text table th {
+table.touchchat-table th {
   background-color: #f5f5f5;
   font-weight: bold;
 }
-.msg-rich-text table tr:nth-child(even) {
+table.touchchat-table tr:nth-child(even) {
   background-color: #f9f9f9;
 }
-.msg-rich-text table tr:hover {
+table.touchchat-table tr:hover {
   background-color: #f1f1f1;
 }
-pre {
-  position: relative;
-  margin-top: 2.5em;
+.delete-dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
 }
-.copy-code-btn {
-  position: absolute;
-  top: 0.5em;
-  right: 0.5em;
-  padding: 0.25em 0.5em;
-  background-color: rgba(0, 0, 0, 0.7);
-  color: white;
+.delete-dialog {
+  background-color: white;
+  border-radius: 0.5em;
+  padding: 1.25em;
+  width: 18.75em;
+}
+.delete-dialog-title {
+  font-size: 1.125em;
+  font-weight: bold;
+  margin-bottom: 0.9375em;
+}
+.delete-dialog-content {
+  font-size: 0.875em;
+  color: #666;
+  margin-bottom: 1.25em;
+}
+.delete-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.625em;
+}
+.delete-dialog-cancel {
+  padding: 0.5em 1em;
+  background-color: #f0f0f0;
   border: none;
   border-radius: 0.25em;
-  font-size: 0.75em;
   cursor: pointer;
-  z-index: 1;
-  transition: background-color 0.2s;
 }
-.copy-code-btn:hover {
-  background-color: rgba(0, 0, 0, 0.9);
-}
-.action-btn {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.25em 0.25em;
+.delete-dialog-confirm {
+  padding: 0.5em 1em;
+  background-color: #ff4d4f;
+  color: white;
   border: none;
-  border-radius: 1em;
+  border-radius: 0.25em;
   cursor: pointer;
-  font-size: 0.75;
-  color: #666666;
-  transition: all 0.3s ease;
-}
-.action-btn svg {
-  width: 0.875em;
-  height: 0.875em;
 }
-.action-btn:hover {
-  background: #eaeaea;
-}
-.like-btn.liked {
-  color: #007bff;
+.touchchat {
+  --action-item-width: 1.5em;
+  --action-item-height: 1.5em;
+  --action-item-radius: 0.25em;
+  --action-item-size: 1em;
+  --action-item-family: 'touchchat-icon';
+  --action-item-color: #86909c;
+  --action-item-bg: transparent;
+  --action-item-border: none;
+  --action-item-hover-color: var(--action-item-color);
+  --action-item-hover-bg: rgba(0, 0, 0, 0.1);
+  --action-item-hover-border: var(--action-item-border);
+  --action-item-active-color: var(--action-item-color);
+  --action-item-active-bg: rgba(0, 0, 0, 0.3);
+  --action-item-active-border: var(--action-item-border);
+  --action-copy-content: '\e603';
+  --action-edit-content: '\e602';
+  --action-remove-content: '\e605';
+  --action-refresh-content: '\e606';
+  --action-good-content: '\e60a';
+  --action-bad-content: '\e601';
+  --action-good-on-content: '\e60e';
+  --action-bad-on-content: '\e60d';
+  --action-good-on-color: red;
+  --action-bad-on-color: red;
+  --action-tip-padding: 0.5em 1em;
+  --action-tip-bg: rgba(0, 0, 0, 0.9);
+  --action-tip-color: #fff;
+  --action-tip-lh: 1.3em;
+  --action-tip-radius: 0.25em;
+  --action-tip-arrow-size: 0.4em;
+}
+.touchchat-action-item {
+  position: relative;
+  display: inline-flex;
+  width: var(--action-item-width);
+  height: var(--action-item-height);
+  align-items: center;
+  justify-content: center;
+  cursor: default;
+  border-radius: var(--action-item-radius);
+  font-family: var(--action-item-family);
+  color: var(--action-item-color);
+  background: var(--action-item-bg);
+  border: var(--action-item-border);
 }
-.dislike-btn.disliked {
-  color: #ff4d4f;
+.touchchat-action-item:before {
+  font-size: var(--action-item-size);
+  content: var(--action-icon-content);
 }
-.retry-btn,
-.copy-btn {
-  color: #666666;
+.touchchat-action-item.value-copy {
+  --action-icon-content: var(--action-copy-content);
 }
-.ai-actions .like-btn.liked,
-.ai-actions .dislike-btn.disliked {
-  background-color: #f0f5ff;
+.touchchat-action-item.value-edit {
+  --action-icon-content: var(--action-edit-content);
 }
-.ai-actions .like-btn.liked:hover,
-.ai-actions .dislike-btn.disliked:hover {
-  box-shadow: 0 0.25em 0.75em rgba(0, 120, 255, 0.15);
-  transform: translateY(-0.125em);
+.touchchat-action-item.value-remove {
+  --action-icon-content: var(--action-remove-content);
 }
-.hello-chat-content {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.touchchat-action-item.value-good {
+  --action-icon-content: var(--action-good-content);
 }
-.history-list {
-  flex: 1;
-  overflow-y: auto;
-  list-style: none;
-  padding: 0;
-  margin: 0;
+.touchchat-action-item.value-bad {
+  --action-icon-content: var(--action-bad-content);
 }
-.history-list li {
-  padding: 0.75em 1em;
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.touchchat-action-item.value-refresh {
+  --action-icon-content: var(--action-refresh-content);
 }
-.history-list li:hover {
-  background: var(--Neutral-colors-White, #f2f3f5);
-  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
+.touchchat-action-item.value-good.is-on {
+  --action-icon-content: var(--action-good-on-content);
+  color: var(--action-good-on-color);
 }
-.history-list li.active {
-  border-radius: 0.25em;
-  background: var(--Info-Info--, #eaf5ff);
+.touchchat-action-item.value-bad.is-on {
+  --action-icon-content: var(--action-bad-on-content);
+  color: var(--action-bad-on-color);
 }
-.history-list li.active .history-title {
-  color: #0077fa !important;
+.touchchat-action-item:hover {
+  color: var(--action-item-hover-color);
+  background: var(--action-item-hover-bg);
+  border: var(--action-item-hover-border);
 }
-.history-list li .history-item {
-  flex: 1;
-  overflow: hidden;
+.touchchat-action-item:hover .touchchat-action-tip {
+  display: block;
 }
-.history-list li .history-item .tooltip-container {
-  position: relative;
-  display: inline-block;
-  max-width: 100%;
+.touchchat-action-item:active {
+  color: var(--action-item-active-color);
+  background: var(--action-item-active-bg);
+  border: var(--action-item-active-border);
 }
-.history-list li .history-item .custom-tooltip {
-  visibility: hidden;
-  opacity: 0;
-  position: fixed;
-  transform: translateX(0%) translateY(-4em);
-  background-color: #000 !important;
-  color: #fff !important;
-  text-align: center;
-  padding: 0.375em 0.625em;
-  border-radius: 0.25em;
-  font-size: 0.75em;
+.touchchat-action-tip {
+  position: absolute;
+  left: 50%;
+  bottom: calc(var(--action-item-height) + var(--action-tip-arrow-size));
+  transform: translateX(-50%);
+  display: none;
+  padding: var(--action-tip-padding);
+  background-color: var(--action-tip-bg);
+  color: var(--action-tip-color);
+  line-height: var(--action-tip-lh);
+  border-radius: var(--action-tip-radius);
   white-space: nowrap;
-  transition: opacity 0.2s, visibility 0.2s;
-  box-shadow: 0 0.125em 0.625em rgba(0, 0, 0, 0.2);
+  z-index: 10;
 }
-.history-list li .history-item .custom-tooltip::after {
+.touchchat-action-tip:before {
   content: '';
   position: absolute;
   top: 100%;
   left: 50%;
-  margin-left: -0.3125em;
-  border-width: 0.3125em;
+  margin-left: calc(-1 * var(--action-tip-arrow-size));
+  border-width: var(--action-tip-arrow-size);
   border-style: solid;
-  border-color: #000 transparent transparent transparent;
+  border-color: var(--action-tip-bg) transparent transparent transparent;
 }
-.history-list li .history-item .history-title {
-  display: block;
-  font-size: 0.875em;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100%;
-  font-family: 'PingFang SC';
-  font-style: normal;
-  line-height: 1.375em;
-  color: #1d2129;
+.sider-bar-view {
+  width: 40%;
+  height: 100%;
+  overflow-y: scroll;
+}
+.sider-bar-view-flag {
+  width: 60%;
+}
+.touchchat {
+  --tooltip-bg: rgba(0, 0, 0, 0.9);
+  --tooltip-color: #fff;
+  --tooltip-padding: 0.5em 1em;
+  --tooltip-radius: 0.25em;
+  --tooltip-lh: 1.3em;
+  --tooltip-arrow-size: 0.4em;
+  --main-padding: 1em;
+  --side-width: 18em;
+  --side-bg: #f7f8fa;
+  --side-padding: 1em;
+  --side-gap: 1em;
+  --logo-gap: 0.5em;
+  --logo-pic-width: 2.3em;
+  --logo-pic-height: 2em;
+  --logo-pic-bg: url(../img/logo.png);
+  --logo-text-weight: bold;
+  --logo-text-size: 1.5em;
+  --logo-text-color: var(--color-primary);
+  --add-size: 1em;
+  --add-width: 100%;
+  --add-height: 3em;
+  --add-gap: 0.5em;
+  --add-border: 1px solid var(--color-primary);
+  --add-color: var(--color-primary);
+  --add-radius: 0.25em;
+  --add-icon-size: 1em;
+  --add-icon-family: 'touchchat-icon';
+  --add-icon-content: '\e600';
+  --add-hover-bg: #f0f7ff;
+  --add-hover-color: var(--add-color);
+  --add-hover-border: var(--add-border);
+  --add-active-bg: #c7e2ff;
+  --add-active-color: var(--add-color);
+  --add-active-border: var(--add-border);
+  --hidemenu-width: 2em;
+  --hidemenu-height: 2em;
+  --hidemenu-radius: 0.25em;
+  --hidemenu-size: 1em;
+  --hidemenu-family: 'touchchat-icon';
+  --hidemenu-icon-size: var(--hidemenu-size);
+  --hidemenu-icon-family: var(--hidemenu-family);
+  --hidemenu-icon-content: '\e604';
+  --hidemenu-color: inherit;
+  --hidemenu-border: none;
+  --hidemenu-hover-bg: rgba(0, 0, 0, 0.1);
+  --hidemenu-hover-color: var(--hidemenu-color);
+  --hidemenu-hover-border: var(--hidemenu-border);
+  --hidemenu-active-bg: rgba(0, 0, 0, 0.3);
+  --hidemenu-active-color: var(--hidemenu-color);
+  --hidemenu-active-border: var(--hidemenu-border);
+  --showmenu-width: 2em;
+  --showmenu-height: 2em;
+  --showmenu-radius: 0.25em;
+  --showmenu-size: 1em;
+  --showmenu-family: 'touchchat-icon';
+  --showmenu-icon-size: var(--showmenu-size);
+  --showmenu-icon-family: var(--showmenu-family);
+  --showmenu-icon-content: '\e608';
+  --showmenu-color: inherit;
+  --showmenu-border: none;
+  --showmenu-hover-bg: rgba(0, 0, 0, 0.1);
+  --showmenu-hover-color: var(--showmenu-color);
+  --showmenu-hover-border: var(--showmenu-border);
+  --showmenu-active-bg: rgba(0, 0, 0, 0.3);
+  --showmenu-active-color: var(--showmenu-color);
+  --showmenu-active-border: var(--showmenu-border);
+  --header-padding: 1em;
+  --header-gap: 1em;
+  --add-lite-width: 2em;
+  --add-lite-height: 2em;
+  --add-lite-radius: 0.25em;
+  --add-lite-size: 1em;
+  --add-lite-family: 'touchchat-icon';
+  --add-lite-icon-size: var(--add-lite-size);
+  --add-lite-icon-family: var(--add-lite-family);
+  --add-lite-icon-content: '\e600';
+  --add-lite-color: #1361ff;
+  --add-lite-border: 1px solid var(--add-lite-color);
+  --add-lite-hover-bg: rgba(19, 97, 255, 0.1);
+  --add-lite-hover-color: var(--add-lite-color);
+  --add-lite-hover-border: var(--add-lite-border);
+  --add-lite-active-bg: rgba(19, 97, 255, 0.3);
+  --add-lite-active-color: var(--add-lite-color);
+  --add-lite-active-border: var(--add-lite-border);
+  --history-gap: 1em;
+  --history-group-gap: 0.5em;
+  --history-content-gap: 0;
+  --history-title-weight: bold;
+  --history-title-gap: 0.5em;
+  --history-title-padding: 0 1em;
+  --history-title-icon-size: 1em;
+  --history-title-icon-family: 'touchchat-icon';
+  --history-title-icon-content: '\e613';
+  --history-item-padding: 0 1em;
+  --history-item-radius: 0.25em;
+  --history-item-gap: 0.5em;
+  --history-item-height: 2.5em;
+  --history-item-color: inherit;
+  --history-item-bg: transparent;
+  --history-item-border: none;
+  --history-item-hover-color: var(--history-item-color);
+  --history-item-hover-bg: rgba(0, 0, 0, 0.1);
+  --history-item-hover-border: var(--history-item-border);
+  --history-item-active-color: var(--history-item-color);
+  --history-item-active-bg: rgba(0, 0, 0, 0.3);
+  --history-item-active-border: var(--history-item-border);
+  --history-item-on-color: var(--color-primary);
+  --history-item-on-bg: #eaf5ff;
+  --history-item-on-border: var(--history-item-border);
+  --history-item-on-hover-color: var(--history-item-on-color);
+  --history-item-on-hover-bg: var(--history-item-on-bg);
+  --history-item-on-hover-border: var(--history-item-on-border);
+  --history-item-on-active-color: var(--history-item-on-color);
+  --history-item-on-active-bg: var(--history-item-on-bg);
+  --history-item-on-active-border: var(--history-item-on-border);
+  --history-item-input-width: 100%;
+  --history-item-input-height: 2.5em;
+  --history-item-input-padding: 0 calc(1em - 1px);
+  --history-item-input-border: 1px solid #ccc;
+  --history-item-input-radius: 0.25em;
+  --history-item-input-size: 1em;
+  --history-item-input-focus-border-color: #0077fa;
+  --history-more-width: 1.5em;
+  --history-more-height: 1.5em;
+  --history-more-radius: 50%;
+  --history-more-color: #000000;
+  --history-more-bg: none;
+  --history-more-border: 0 none;
+  --history-more-hover-bg: rgba(0, 0, 0, 0.1);
+  --history-more-active-bg: rgba(0, 0, 0, 0.3);
+  --history-more-icon-size: 1em;
+  --history-more-icon-family: 'touchchat-icon';
+  --history-more-icon-content: '\e612';
+  --history-float-width: 7.5em;
+  --history-float-bg: #fff;
+  --history-float-radius: 0.25em;
+  --history-float-shadow: 0 0.125em 0.625em rgba(0, 0, 0, 0.1);
+  --history-rename-padding: 0 1em;
+  --history-rename-height: 2.5em;
+  --history-rename-gap: 0.5em;
+  --history-rename-color: #000;
+  --history-rename-size: 1em;
+  --history-rename-family: 'touchchat-icon';
+  --history-rename-icon: '\e602';
+  --history-rename-icon-size: 1em;
+  --history-rename-icon-family: var(--history-rename-family);
+  --history-rename-hover-color: var(--history-rename-color);
+  --history-rename-hover-border: var(--history-rename-border);
+  --history-rename-hover-bg: rgba(0, 0, 0, 0.1);
+  --history-rename-active-color: var(--history-rename-color);
+  --history-rename-active-border: var(--history-rename-border);
+  --history-rename-active-bg: rgba(0, 0, 0, 0.3);
+  --history-remove-padding: 0 1em;
+  --history-remove-height: 2.5em;
+  --history-remove-gap: 0.5em;
+  --history-remove-color: red;
+  --history-remove-size: 1em;
+  --history-remove-family: 'touchchat-icon';
+  --history-remove-icon: '\e605';
+  --history-remove-icon-size: 1em;
+  --history-remove-icon-family: var(--history-remove-family);
+  --history-remove-hover-color: var(--history-remove-color);
+  --history-remove-hover-border: var(--history-remove-border);
+  --history-remove-hover-bg: rgba(0, 0, 0, 0.1);
+  --history-remove-active-color: var(--history-remove-color);
+  --history-remove-active-border: var(--history-remove-border);
+  --history-remove-active-bg: rgba(0, 0, 0, 0.3);
+}
+.touchchat button {
+  font-size: 100%;
+  cursor: pointer;
+  outline: 0 none;
 }
-.history-list li .history-item .history-time {
-  display: block;
-  font-size: 0.75em;
-  color: #86909c;
-  margin-top: 0.25em;
+.touchchat input,
+.touchchat textarea {
+  font-size: 100%;
+  outline: 0 none;
 }
-.history-list li .item-actions {
+.touchchat {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
   position: relative;
-  height: 1.5em;
 }
-.history-list li .item-actions .more-btn {
-  background-color: #ffffff;
-  border: none;
-  width: 1.5em;
-  height: 1.5em;
-  line-height: 1.5em;
-  border-radius: 50%;
-  cursor: pointer;
+.touchchat-header {
+  padding: var(--header-padding);
   display: flex;
   align-items: center;
-  justify-content: center;
-  color: #000000;
-  opacity: 0;
-  transition: opacity 0.2s, background-color 0.2s;
-  visibility: hidden;
+  gap: var(--header-gap);
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #ffffff;
+  z-index: 86;
 }
-.history-list li .item-actions:hover .more-btn {
-  opacity: 1;
+.touchchat-content {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+  width: 100%;
+  height: 100%;
 }
-.history-list li .item-actions .action-menu {
-  position: absolute;
-  right: 0;
-  top: 100%;
-  margin-top: 0.25em;
-  min-width: 7.5em;
-  background: #fff;
-  border-radius: 0.25em;
-  box-shadow: 0 0.125em 0.625em rgba(0, 0, 0, 0.1);
-  z-index: 100;
-  transition: opacity 0.2s, visibility 0.2s;
+.touchchat-side {
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  width: var(--side-width);
+  background: var(--side-bg);
+  padding: var(--side-padding);
+  gap: var(--side-gap);
 }
-.history-list li .item-actions .menu-item {
+.touchchat-side-header {
   display: flex;
   align-items: center;
-  padding: 0.5em 0.75em;
-  cursor: pointer;
-  transition: background-color 0.2s;
+  gap: var(--header-gap);
 }
-.history-list li .item-actions .menu-item:hover {
-  background-color: #f3f4f6;
+.touchchat-logo {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--logo-gap);
 }
-.history-list li .item-actions .menu-item svg {
-  margin-right: 0.5em;
+.touchchat-logo-pic {
+  width: var(--logo-pic-width);
+  height: var(--logo-pic-height);
+  background: var(--logo-pic-bg);
+  background-size: 100% 100%;
 }
-.history-list li .item-actions .menu-item.delete-btn {
-  color: #ef4444;
+.touchchat-logo-text {
+  font-weight: var(--logo-text-weight);
+  font-size: var(--logo-text-size);
+  color: var(--logo-text-color);
 }
-.history-list .history-item-container:hover .item-actions .more-btn {
-  opacity: 1;
-  visibility: visible;
+.touchchat-add {
+  flex-shrink: 0;
+  width: var(--add-width);
+  background: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--add-gap);
+  border: var(--add-border);
+  color: var(--add-color);
+  height: var(--add-height);
+  box-sizing: border-box;
+  border-radius: var(--add-radius);
+  cursor: pointer;
 }
-.history-list .history-item-container:hover .custom-tooltip {
-  visibility: visible !important;
-  opacity: 1 !important;
+.touchchat-add:hover {
+  color: var(--add-hover-color);
+  background: var(--add-hover-bg);
+  border: var(--add-hover-border);
 }
-.history-group-header {
-  padding: 0.5em 1em;
-  pointer-events: none;
-  user-select: none;
+.touchchat-add:active {
+  color: var(--add-active-color);
+  background: var(--add-active-bg);
+  border: var(--add-active-border);
 }
-.history-group-header .history-item .history-title {
-  color: #86909c;
-  /* 保持灰色标题 */
-  font-size: 0.75em;
-  font-weight: 500;
-  margin-left: 0.5em;
+.touchchat-add-icon:before {
+  font-size: var(--add-icon-size);
+  font-family: var(--add-icon-family);
+  content: var(--add-icon-content);
 }
-.history-group-header .history-item:hover {
-  background: none !important;
-  cursor: default;
+.touchchat-add-text {
+  font-size: var(--add-size);
 }
-.edit-title-input {
-  width: 100%;
-  padding: 0.25em 0.5em;
-  border: 1px solid #ccc;
-  border-radius: 0.25em;
-  font-size: 0.875em;
-  outline: none;
+.touchchat-hidemenu {
   box-sizing: border-box;
-  /* 添加样式确保填满容器 */
-  margin: 0;
+  width: var(--hidemenu-width);
+  height: var(--hidemenu-height);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--hidemenu-radius);
+  color: var(--hidemenu-color);
+  border: var(--hidemenu-border);
+}
+.touchchat-hidemenu:hover {
+  color: var(--hidemenu-hover-color);
+  background: var(--hidemenu-hover-bg);
+  border: var(--hidemenu-hover-border);
+}
+.touchchat-hidemenu:active {
+  color: var(--hidemenu-active-color);
+  background: var(--hidemenu-active-bg);
+  border: var(--hidemenu-active-border);
+}
+.touchchat-hidemenu-icon:before {
+  font-size: var(--hidemenu-icon-size);
+  font-family: var(--hidemenu-icon-family);
+  content: var(--hidemenu-icon-content);
+}
+.touchchat-showmenu {
+  box-sizing: border-box;
+  width: var(--showmenu-width);
+  height: var(--showmenu-height);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--showmenu-radius);
+  color: var(--showmenu-color);
+  border: var(--showmenu-border);
+}
+.touchchat-showmenu:hover {
+  color: var(--showmenu-hover-color);
+  background: var(--showmenu-hover-bg);
+  border: var(--showmenu-hover-border);
+}
+.touchchat-showmenu:active {
+  color: var(--showmenu-active-color);
+  background: var(--showmenu-active-bg);
+  border: var(--showmenu-active-border);
+}
+.touchchat-showmenu-icon:before {
+  font-size: var(--showmenu-icon-size);
+  font-family: var(--showmenu-icon-family);
+  content: var(--showmenu-icon-content);
+}
+.touchchat-add-lite {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--add-lite-radius);
+  color: var(--add-lite-color);
+  border: var(--add-lite-border);
+  padding: 0 1em;
+  cursor: pointer;
 }
-/* 添加聚焦时的边框样式 */
-.edit-title-input:focus {
-  border-color: #0077fa;
+.touchchat-add-lite:hover {
+  color: var(--add-lite-hover-color);
+  background: var(--add-lite-hover-bg);
+  border: var(--add-lite-hover-border);
 }
-/* 修改历史项容器样式 */
-.history-item-container .history-item {
-  display: flex;
-  flex: 1;
-}
-.tooltip-container {
-  min-width: 0;
-  /* 允许内容收缩 */
+.touchchat-add-lite:active {
+  color: var(--add-lite-active-color);
+  background: var(--add-lite-active-bg);
+  border: var(--add-lite-active-border);
 }
-.actions-container {
-  padding: 0 0.5em;
+.touchchat-add-lite-icon:before {
+  font-size: var(--add-lite-icon-size);
+  font-family: var(--add-lite-icon-family);
+  content: var(--add-lite-icon-content);
 }
-.actions {
+.touchchat-main {
+  flex: 1;
   display: flex;
-  justify-content: flex-end;
-  flex-wrap: wrap;
-  gap: 0.25em;
-}
-.ai-actions-container .actions {
-  justify-content: flex-start;
-}
-.action-btn {
+  flex-direction: column;
+  width: calc(100% - var(--side-width));
+  height: 100%;
+  box-sizing: border-box;
   position: relative;
-  /* 作为定位容器 */
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  /* 确保图标居中 */
-  cursor: pointer;
-  transition: all 0.2s ease;
-  /* 确保SVG图标居中且不影响定位 */
-}
-.action-btn .btn-text {
-  position: absolute;
-  top: -2.2em;
-  /* 向上偏移显示 */
-  left: 50%;
-  transform: translateX(-50%);
-  /* 水平居中 */
-  display: none;
-  padding: 0.25em 0.5em;
-  background-color: #000;
-  /* 黑色背景 */
-  color: #fff;
-  /* 白色文字 */
-  font-size: 0.75em;
-  border-radius: 0.25em;
-  /* 圆角效果 */
-  white-space: nowrap;
-  box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.2);
-  /* 添加阴影增强立体感 */
-  z-index: 10;
-  /* 确保显示在最上层 */
-}
-.action-btn .btn-text::after {
-  content: '';
-  position: absolute;
-  bottom: -0.2em;
-  /* 定位在提示框底部 */
-  left: 50%;
-  transform: translateX(-50%);
-  border-width: 0.25em 0.25em 0;
-  border-style: solid;
-  border-color: #000 transparent transparent;
-}
-.action-btn:hover {
-  /* 保留SVG原有悬浮效果 */
-}
-.action-btn:hover .btn-text {
-  display: inline-block;
-  /* 悬浮时显示文字 */
-}
-.action-btn:hover svg {
-  background-color: #eeeeee;
-  border-radius: 50%;
-}
-.action-btn svg {
-  flex-shrink: 0;
-  transition: all 0.2s ease;
-}
-.message-type-user .action-btn.edit-btn:hover svg path {
-  fill: #0077fa;
+  padding: var(--main-padding);
+  background-color: #ffffff;
 }
-.message-type-user .action-btn.delete-btn:hover svg path {
-  fill: #ff4d4f;
+.touchchat-history {
+  flex: 1;
+  overflow: auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--history-gap);
 }
-.action-btn.retry-btn:hover svg path {
-  fill: #0077fa;
+.touchchat-history-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--history-group-gap);
 }
-.action-btn.like-btn.liked svg path {
-  fill: #ff4d4f;
+.touchchat-history-title {
+  font-weight: var(--history-title-weight);
+  display: flex;
+  align-items: center;
+  gap: var(--history-title-gap);
+  padding: var(--history-title-padding);
 }
-.action-btn.dislike-btn.disliked svg path {
-  fill: #faad14;
+.touchchat-history-title-icon:before {
+  content: var(--history-title-icon-content);
+  font-family: var(--history-title-icon-family);
+  font-size: var(--history-title-icon-size);
 }
-.history-container {
+.touchchat-history-content {
   display: flex;
   flex-direction: column;
-  height: 100%;
-  background-color: #f7f8fa;
-  position: relative;
+  gap: var(--history-content-gap);
 }
-.history-container .app-header {
-  padding: 0.75em 0 0.75em 0.5em;
+.touchchat-history-item {
   display: flex;
-  justify-content: space-between;
+  padding: var(--history-item-padding);
+  cursor: pointer;
+  border-radius: var(--history-item-radius);
+  gap: var(--history-item-gap);
   align-items: center;
+  height: var(--history-item-height);
+  color: var(--history-item-color);
+  background: var(--history-item-bg);
+  border: var(--history-item-border);
+}
+.touchchat-history-item:hover {
+  color: var(--history-item-hover-color);
+  background: var(--history-item-hover-bg);
+  border: var(--history-item-hover-border);
+}
+.touchchat-history-item:active {
+  color: var(--history-item-active-color);
+  background: var(--history-item-active-bg);
+  border: var(--history-item-active-border);
+}
+.touchchat-history-item.is-on {
+  color: var(--history-item-on-color);
+  background: var(--history-item-on-bg);
+  border: var(--history-item-on-border);
+}
+.touchchat-history-item.is-on:hover {
+  color: var(--history-item-on-hover-color);
+  background: var(--history-item-on-hover-bg);
+  border: var(--history-item-on-hover-border);
+}
+.touchchat-history-item.is-on:active {
+  color: var(--history-item-on-active-color);
+  background: var(--history-item-on-active-bg);
+  border: var(--history-item-on-active-border);
+}
+.touchchat-history-item:has(.touchchat-history-input) {
+  padding: 0;
 }
-.history-container .app-header h1 {
+.touchchat-history-input {
+  width: var(--history-item-input-width);
+  height: var(--history-item-input-height);
+  padding: var(--history-item-input-padding);
+  border: var(--history-item-input-border);
+  border-radius: var(--history-item-input-radius);
+  box-sizing: border-box;
   margin: 0;
-  font-size: 1.125em;
-  font-weight: 600;
-  color: #374151;
-}
-.history-container .app-header .header-actions {
-  display: flex;
-  gap: 0.75em;
 }
-.history-container .app-header .header-actions .settings-btn {
+.touchchat-history-input input {
+  width: 100%;
+  height: 100%;
+  font-size: var(--history-item-input-size);
+  border: 0 none;
   background: none;
-  border: none;
-  cursor: pointer;
-  color: #86909c;
 }
-.history-container .app-header .header-actions .settings-btn:hover {
-  opacity: 0.8;
-  background-color: #eeeeee;
+.touchchat-history-input:has(input:focus) {
+  border-color: var(--history-item-input-focus-border-color);
 }
-.history-container .main-content {
-  display: flex;
+.touchchat-history-item-text {
   position: relative;
   flex: 1;
+  white-space: nowrap;
   overflow: hidden;
-  background-color: #ffffff;
+  text-overflow: ellipsis;
 }
-.history-container .main-content .history-sidebar {
-  flex: 0 0 16.25em;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  transition: transform 0.3s ease, width 0.3s ease;
-  z-index: 10;
-  padding: 0.375em;
-  border-radius: 0.375em;
-  background: var(--Fill-Fill--, #f7f8fa);
-  position: relative;
+.touchchat-tooltip {
+  pointer-events: none;
+  z-index: 1000;
+  visibility: hidden;
+  opacity: 0;
+  position: fixed;
+  transform: translateX(0%) translateY(-4em);
+  background-color: var(--tooltip-bg);
+  color: var(--tooltip-color);
+  text-align: center;
+  padding: var(--tooltip-padding);
+  border-radius: var(--tooltip-radius);
+  white-space: nowrap;
+  transition: opacity 0.2s, visibility 0.2s;
+  line-height: var(--tooltip-lh);
 }
-.history-container .main-content .history-sidebar.collapsed {
-  transform: translateX(-100%);
-  width: 0;
-  border-right: none;
-  padding: 0;
+.touchchat-tooltip:after {
+  content: '';
   position: absolute;
+  top: 100%;
+  left: 0.75em;
+  margin-left: calc(-1 * var(--tooltip-arrow-size));
+  border-width: var(--tooltip-arrow-size);
+  border-style: solid;
+  border-color: var(--tooltip-bg) transparent transparent transparent;
 }
-.history-container .main-content .history-sidebar.collapsed ~ .chat-area {
-  margin: 0 6.25em;
+.touchchat-history-item:hover .touchchat-history-fn .touchchat-history-more {
+  opacity: 1;
+  visibility: visible;
 }
-.history-container .main-content .history-sidebar .new-chat-btn {
-  padding: 0.5em 0.75em;
-  cursor: pointer;
-  width: 100%;
-  border-radius: 0.25em;
-  border: 1px solid #0077fa;
-  color: #0077fa;
-  text-align: center;
-  font-family: 'PingFang SC';
-  font-size: 0.875em;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.375em;
-  background-color: var(--Fill-Fill--, #f7f8fa);
-  display: flex;
+.touchchat-history-item:hover .touchchat-tooltip {
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+.touchchat-history-more {
+  border: var(--history-more-border);
+  width: var(--history-more-width);
+  height: var(--history-more-height);
+  display: inline-flex;
   align-items: center;
+  vertical-align: top;
   justify-content: center;
+  border-radius: var(--history-more-radius);
+  cursor: pointer;
+  color: var(--history-more-color);
+  background: var(--history-more-bg);
+  visibility: hidden;
 }
-.history-container .main-content .history-sidebar .new-chat-btn .add {
-  font-size: 1.5em;
-  margin-right: 0.25em;
+.touchchat-history-more:hover {
+  background: var(--history-more-hover-bg);
 }
-.history-container .main-content .history-sidebar .new-chat-btn:hover {
-  background-color: #0e4cd3;
-  color: #ffffff;
+.touchchat-history-more:active {
+  background: var(--history-more-active-bg);
 }
-.history-container .chat-area {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  transition: margin 0.3s ease;
+.touchchat-history-more-icon:before {
+  font-family: var(--history-more-icon-family);
+  font-size: var(--history-more-icon-size);
+  content: var(--history-more-icon-content);
+}
+.touchchat-history-fn {
+  position: relative;
+  flex-shrink: 0;
 }
-.history-container .floating {
+.touchchat-history-float {
   position: absolute;
-  top: 1em;
-  left: 1em;
-  padding: 0.5em 0.75em;
-  background-color: #ffffff;
-  border: none;
-  border-radius: 0.375em;
-  cursor: pointer;
-  font-size: 0.875em;
-  transition: all 0.3s ease;
-  z-index: 1000;
+  overflow: hidden;
+  right: 0;
+  top: 100%;
+  width: var(--history-float-width);
+  background: var(--history-float-bg);
+  border-radius: var(--history-float-radius);
+  box-shadow: var(--history-float-shadow);
+  z-index: 100;
+  transition: opacity 0.2s, visibility 0.2s;
+}
+.touchchat-history-rename {
   display: flex;
   align-items: center;
-  gap: 0.5em;
-}
-.history-container .floating svg:hover,
-.history-container .floating span:hover {
-  background-color: #eeeeee;
-  opacity: 0.8;
+  padding: var(--history-rename-padding);
+  height: var(--history-rename-height);
+  cursor: pointer;
+  color: var(--history-rename-color);
+  gap: var(--history-rename-gap);
 }
-.history-container .floating span {
-  font-size: 1.5em;
+.touchchat-history-rename:hover {
+  color: var(--history-rename-hover-color);
+  background: var(--history-rename-hover-bg);
+  border: var(--history-rename-hover-border);
 }
-.context-menu {
-  position: absolute;
-  width: 9.375em;
-  background: white;
-  border-radius: 0.375em;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  z-index: 1000;
+.touchchat-history-rename:active {
+  color: var(--history-rename-active-color);
+  background: var(--history-rename-active-bg);
+  border: var(--history-rename-active-border);
 }
-.context-menu .context-menu-item {
-  padding: 0.5em 0.75em;
-  cursor: pointer;
-  transition: background-color 0.2s;
+.touchchat-history-rename-icon:before {
+  font-family: var(--history-rename-icon-family);
+  font-size: var(--history-rename-icon-size);
+  content: var(--history-rename-icon);
 }
-.context-menu .context-menu-item:hover {
-  background-color: #f3f4f6;
+.touchchat-history-rename-text {
+  font-size: var(--history-rename-size);
 }
-.search-box {
-  padding: 0.75em;
-  border-bottom: 1px solid #eaecf0;
+.touchchat-history-remove {
   display: flex;
-  gap: 0.5em;
+  align-items: center;
+  padding: var(--history-remove-padding);
+  height: var(--history-remove-height);
+  cursor: pointer;
+  color: var(--history-remove-color);
+  gap: var(--history-remove-gap);
+}
+.touchchat-history-remove:hover {
+  color: var(--history-remove-hover-color);
+  background: var(--history-remove-hover-bg);
+  border: var(--history-remove-hover-border);
+}
+.touchchat-history-remove:active {
+  color: var(--history-remove-active-color);
+  background: var(--history-remove-active-bg);
+  border: var(--history-remove-active-border);
+}
+.touchchat-history-remove-icon:before {
+  font-family: var(--history-remove-icon-family);
+  font-size: var(--history-remove-icon-size);
+  content: var(--history-remove-icon);
+}
+.touchchat-history-remove-text {
+  font-size: var(--history-remove-size);
+}
+.touchchat {
+  --user-gap: 0.5em;
+  --user-align: flex-end;
+  --user-content-gap: 0.25em;
+  --user-content-max-width: 75%;
+  --user-avatar-pic-width: 2.5em;
+  --user-avatar-pic-height: auto;
+  --user-avatar-pic-radius: 50%;
+  --user-bubble-bg: var(--color-primary);
+  --user-bubble-color: #fff;
+  --user-bubble-padding: 1em 1.5em;
+  --user-bubble-lh: 1.8em;
+  --user-bubble-radius: 0.5em 0 0.5em 0.5em;
+  --user-bubble-border: none;
+  --user-bubble-arrow-width: 0.5em;
+  --user-bubble-arrow-height: 1em;
+  --user-bubble-arrow-bg: url(../img/userArrow.png);
+  --user-bubble-arrow-bg-size: 100% 100%;
+  --user-bubble-text-size: 1.1em;
+  --user-bubble-text-weight: normal;
+  --user-bubble-text-family: inherit;
+  --user-edit-border: 1px solid #ddd;
+  --user-edit-radius: 0.25em;
+  --user-edit-padding: 1em;
+  --user-edit-focus-border-color: var(--color-primary);
+  --user-edit-input-size: 1em;
+  --user-edit-input-width: 40em;
+  --user-edit-input-height: 8em;
+  --user-edit-input-border: 0 none;
+  --user-edit-input-lh: normal;
+  --user-edit-submit-gap: 0.5em;
+  --user-edit-submit-margin-top: 0.5em;
+  --user-cancel-border: 1px solid #ddd;
+  --user-cancel-height: 2.5em;
+  --user-cancel-padding: 0 1.5em;
+  --user-cancel-size: 1em;
+  --user-cancel-radius: 0.25em;
+  --user-cancel-bg: #fff;
+  --user-cancel-color: inherit;
+  --user-cancel-hover-bg: rgba(0, 0, 0, 0.1);
+  --user-cancel-hover-color: var(--user-cancel-color);
+  --user-cancel-hover-border: var(--user-cancel-border);
+  --user-cancel-active-bg: rgba(0, 0, 0, 0.3);
+  --user-cancel-active-color: var(--user-cancel-color);
+  --user-cancel-active-border: var(--user-cancel-border);
+  --user-send-height: 2.5em;
+  --user-send-padding: 0 1.5em;
+  --user-send-size: 1em;
+  --user-send-radius: 0.25em;
+  --user-send-bg: var(--color-primary);
+  --user-send-border: 0 none;
+  --user-send-color: #fff;
+  --user-send-hover-bg: #2e91ff;
+  --user-send-hover-color: var(--user-send-color);
+  --user-send-hover-border: var(--user-send-border);
+  --user-send-active-bg: #005fc7;
+  --user-send-active-color: var(--user-send-color);
+  --user-send-active-border: var(--user-send-border);
+}
+.touchchat-user {
+  display: flex;
+  gap: var(--user-gap);
+  justify-content: var(--user-align);
+}
+.touchchat-user-content {
+  order: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--user-content-gap);
+  max-width: var(--user-content-max-width);
 }
-.search-box input {
+.touchchat-user-content.is-full {
   flex: 1;
-  padding: 0.5em 0.75em;
-  border: 1px solid #eaecf0;
-  border-radius: 0.375em;
-  outline: none;
 }
-.search-box input:focus {
-  border-color: #10b981;
+.touchchat-user-avatar {
+  order: 2;
 }
-.history-group-header {
-  padding: 0.5em 1em;
-  pointer-events: none;
-  user-select: none;
-}
-.history-group-header .history-item .history-title {
-  color: #86909c;
-  /* 保持灰色标题 */
-  font-size: 0.75em;
-  font-weight: 500;
-  margin-left: 0.5em;
-}
-.history-group-header .history-item:hover {
-  cursor: default;
-}
-.user-message {
-  display: flex;
-  justify-content: flex-end;
-  margin-left: auto;
+.file-user-avatar {
+  padding-top: 4em;
 }
-.user-message .message-content {
-  flex-direction: row-reverse;
-  display: flex;
-  align-items: flex-start;
+.touchchat-user-avatar-pic {
+  width: var(--user-avatar-pic-width);
+  height: var(--user-avatar-pic-height);
+  border-radius: var(--user-avatar-pic-radius);
+  order: 2;
 }
-.user-message .text-content {
-  background-color: #0077fa;
-  color: white;
+.touchchat-user-bubble {
+  flex: 1;
+  background: var(--user-bubble-bg);
+  color: var(--user-bubble-color);
+  padding: var(--user-bubble-padding);
+  line-height: var(--user-bubble-lh);
+  border-radius: var(--user-bubble-radius);
+  border: var(--user-bubble-border);
   position: relative;
-  font-size: 0.875em;
-  border-radius: 0.75em 0 0.75em 0.75em;
-  margin-left: 0;
-  margin-right: 0.5em;
-  padding: 0.75em 1em;
 }
-.user-message .text-content::after {
-  background: url('./aiChat/img/corner.png') no-repeat;
+.touchchat-user-bubble:before {
   content: '';
-  background-size: 100% 100%;
-  width: 0.625em;
-  height: 0.625em;
-  display: inline-block;
   position: absolute;
+  display: block;
+  right: calc(-1 * var(--user-bubble-arrow-width));
   top: 0;
-  right: -0.625em;
-  border: 0;
-  transform: rotate(0);
-}
-.edit-textarea {
-  width: calc(100% - 1em);
-  min-height: 5em;
-  padding: 0.5em;
-  border: 1px solid #ddd;
-  border-radius: 0.25em;
-  resize: vertical;
+  width: var(--user-bubble-arrow-width);
+  height: var(--user-bubble-arrow-height);
+  background: var(--user-bubble-arrow-bg);
+  background-size: var(--user-bubble-arrow-bg-size);
+}
+.touchchat-user-bubble-text {
+  font-size: var(--user-bubble-text-size);
+  font-weight: var(--user-bubble-text-weight);
+  font-family: var(--user-bubble-text-family);
+}
+.touchchat-user-edit {
+  border: var(--user-edit-border);
+  overflow: hidden;
+  border-radius: var(--user-edit-radius);
+  padding: var(--user-edit-padding);
+}
+.touchchat-user-edit:has(textarea:focus) {
+  border-color: var(--user-edit-focus-border-color);
+}
+.touchchat-user-edit-input {
+  width: var(--user-edit-input-width);
+  height: var(--user-edit-input-height);
+  border: var(--user-edit-input-border);
+}
+.touchchat-user-edit-input textarea {
+  resize: none;
+  vertical-align: top;
+  font-family: inherit;
+  width: 100%;
+  height: 100%;
+  border: 0 none;
+  line-height: var(--user-edit-input-lh);
+  font-size: var(--user-edit-input-size);
 }
-.edit-buttons {
+.touchchat-user-edit-submit {
+  margin-top: var(--user-edit-submit-margin-top);
   display: flex;
-  gap: 0.625em;
-  margin-top: 0.5em;
+  justify-content: flex-end;
+  gap: var(--user-edit-submit-gap);
 }
-.edit-buttons .save-btn,
-.edit-buttons .cancel-btn {
-  padding: 0.375em 0.75em;
-  border: none;
-  border-radius: 0.25em;
+.touchchat-user-cancel {
+  border: var(--user-cancel-border);
+  height: var(--user-cancel-height);
+  padding: var(--user-cancel-padding);
+  border-radius: var(--user-cancel-radius);
+  cursor: pointer;
+  background: var(--user-cancel-bg);
+  color: var(--user-cancel-color);
+}
+.touchchat-user-cancel:hover {
+  background: var(--user-cancel-hover-bg);
+  color: var(--user-cancel-hover-color);
+  border: var(--user-cancel-hover-border);
+}
+.touchchat-user-cancel:active {
+  background: var(--user-cancel-active-bg);
+  color: var(--user-cancel-active-color);
+  border: var(--user-cancel-active-border);
+}
+.touchchat-user-cancel-text {
+  font-size: var(--user-cancel-size);
+}
+.touchchat-user-send {
+  height: var(--user-send-height);
+  padding: var(--user-send-padding);
+  border-radius: var(--user-send-radius);
   cursor: pointer;
+  background: var(--user-send-bg);
+  border: var(--user-send-border);
+  color: var(--user-send-color);
 }
-.edit-buttons .save-btn:hover,
-.edit-buttons .cancel-btn:hover {
-  opacity: 0.8;
+.touchchat-user-send:hover {
+  background: var(--user-send-hover-bg);
+  color: var(--user-send-hover-color);
+  border: var(--user-send-hover-border);
 }
-.edit-buttons .save-btn {
-  background-color: #42b983;
-  color: white;
+.touchchat-user-send:active {
+  background: var(--user-send-active-bg);
+  color: var(--user-send-active-color);
+  border: var(--user-send-active-border);
 }
-.edit-buttons .save-btn:disabled {
-  opacity: 0.8;
-  cursor: not-allowed;
+.touchchat-user-send-text {
+  font-size: var(--user-send-size);
 }
-.edit-buttons .cancel-btn {
-  background-color: #f5f5f5;
+.step-container {
+  font-family: Arial, sans-serif;
 }
-.user-message-wrapper {
+.step-item {
   display: flex;
-  flex-direction: column;
-  gap: 0.5em;
+  margin-bottom: 1.25em;
+  align-items: flex-start;
+  position: relative;
+  /* 为连接线定位做准备 */
 }
-.user-message-wrapper .msg-content-container .msg-rich-text .line {
+.step-marker {
+  width: 1.5em;
+  height: 1.5em;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: #fff;
-  text-shadow: 0 0.125em 0.25em #1d77ff;
-  /* Body 正文/Medium */
-  font-family: 'PingFang SC';
-  font-size: 0.875em;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.375em;
-  /* 157.143% */
+  font-weight: bold;
+  margin-right: 1em;
+  flex-shrink: 0;
 }
-.edit-input-container {
-  width: 100%;
-  overflow: hidden;
-  border-radius: 0.5em;
-  border: 1px solid var(--Brand-Brand-, #0077fa);
-  background: #fff;
-  box-shadow: 0 0 0 0.125em rgba(0, 119, 250, 0.15);
-  margin: 0 0.5em 0.625em 0.5em;
+.completed .step-marker {
+  background: var(--Brand-Brand-, #0077fa);
 }
-.edit-input-container .edit-textarea {
-  width: 100%;
-  min-height: 6.25em;
-  padding: 0.75em;
-  border: none;
-  resize: vertical;
-  outline: none;
-  font-size: 0.875em;
-  line-height: 1.5;
+.ongoing .step-marker {
+  background: var(--Brand-Brand-, #0077fa);
 }
-.edit-input-container .edit-controls {
-  display: flex;
-  justify-content: flex-end;
-  padding: 0.5em;
-  gap: 0.5em;
+.ongoing .step-content h3 {
+  color: var(--Brand-Brand-, #0077fa);
 }
-.edit-input-container .edit-controls .btn {
-  padding: 0.375em 1em;
-  border-radius: 0.25em;
-  font-size: 0.875em;
-  cursor: pointer;
+.check-icon {
+  font-size: 1.125em;
 }
-.edit-input-container .edit-controls .btn.cancel-btn {
-  background-color: #ffffff;
-  color: #4e5969;
-  border: 1px solid #e5e6eb;
+.step-content {
+  flex: 1;
+  margin-bottom: 1em;
 }
-.edit-input-container .edit-controls .btn.send-btn {
-  background-color: #1890ff;
-  color: #ffffff;
-  border: none;
+.step-content h3 {
+  margin-top: 0;
+  font-size: 1.125em;
+  font-weight: 600;
+  margin-bottom: 0.5em;
 }
-.edit-input-container .edit-controls .btn.send-btn:disabled {
-  background-color: #e8f3ff;
-  cursor: not-allowed;
+.step-content p {
+  margin: 0.25em 0;
+  line-height: 1.5;
+  color: #333;
 }
-.edit-input-container .edit-controls .btn:hover {
-  opacity: 0.8;
+/* 修改连接线样式 */
+.step-connector {
+  position: absolute;
+  left: 0.75em;
+  top: 2em;
+  height: calc(100% - 1.25em);
+  width: 2px;
+  background: var(--Brand-Brand-, #0077fa);
+  border-radius: 2px;
+}
+/* 最后一个 step-item 不显示连接线 */
+.step-item:last-child .step-connector {
+  display: none;
 }
-.card-container {
-  padding-top: 0.75em;
+.step-item:last-child,
+.step-item:last-child .step-content {
+  margin-bottom: 0;
+}
+.touchchat-agents {
+  display: flex;
+  flex-direction: column;
+  gap: var(--history-group-gap);
+}
+.card-container {
+  padding-top: 0.75em;
 }
 .card-header {
   display: flex;
@@ -1418,893 +2137,470 @@ pre {
   -moz-box-orient: vertical;
   line-clamp: 2;
 }
-.text-content-wrapper {
-  display: flex;
-  flex-direction: column;
-}
-.is-editing {
+.file-content {
+  --file-content-pd: 0.75em;
+  --file-content-gap: 0.75em;
   width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  overflow: visible;
 }
-.is-editing .edit-input-container {
-  margin-left: -10px;
-}
-.message-item {
+.file-content-scroll {
   display: flex;
-  flex-direction: row;
+  overflow-x: auto;
+  overflow-y: hidden;
   align-items: flex-start;
-  margin-bottom: 15px;
-}
-.edit-input-container {
-  width: 100%;
-  padding: 10px;
-  box-sizing: border-box;
-  margin-top: 0.25em;
-  /*  如果是用户消息的编辑区域，增加与头像方向的间距  */
-}
-:deep(.user-message) .edit-input-container {
-  margin-left: -0.625em;
-  /* 增加左侧间距，远离用户头像  */
-}
-.edit-input-container .edit-textarea {
-  width: 100%;
-  min-height: 5em;
-  padding: 0.625em;
-  border: none;
-  resize: vertical;
-  outline: none;
-  font-size: 0.875em;
-  box-sizing: border-box;
-}
-.edit-input-container .edit-textarea:focus {
-  border-color: #4096ff;
+  gap: var(--file-content-gap);
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: none;
+  /* IE 和 Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+.file-content-scroll::-webkit-scrollbar {
+  display: none;
 }
-.edit-input-container .edit-controls {
+.file-content-right-tip,
+.file-content-left-tip {
+  position: absolute;
+  top: 0;
+  width: 3.25em;
+  height: 100%;
   display: flex;
-  justify-content: flex-end;
-  margin-top: 0.625em;
+  align-items: center;
   gap: 0.625em;
 }
-.edit-input-container .edit-controls .btn {
-  padding: 0.375em 1em;
-  border-radius: 0.25em;
-  border: none;
-  cursor: pointer;
-  font-size: 0.875em;
-}
-.edit-input-container .edit-controls .btn.cancel-btn {
-  background-color: #f5f5f5;
-  color: #666;
+.file-content-right-tip {
+  right: 0;
+  justify-content: flex-end;
+  background: linear-gradient(270deg, #fff 55.88%, rgba(255, 255, 255, 0.7) 80.15%, rgba(255, 255, 255, 0) 100%);
 }
-.edit-input-container .edit-controls .btn.cancel-btn:hover {
-  background-color: #e8e8e8;
+.file-content-left-tip {
+  left: 0;
+  justify-content: flex-start;
+  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 55.88%, rgba(255, 255, 255, 0.7) 80.15%, #fff 100%);
 }
-.edit-input-container .edit-controls .btn.send-btn {
-  background-color: #4096ff;
-  color: white;
+.file-content-left-tip .file-content-svg {
+  transform: rotate(180deg);
 }
-.edit-input-container .edit-controls .btn.send-btn:hover {
-  background-color: #66b1ff;
+.file-content-svg {
+  display: flex;
+  width: 1em;
+  height: 1em;
+  padding: 0.25em;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  border-radius: 0.375em;
+  border: 1px solid var(--Border-Border-, #d8dce4);
+  background: var(--Neutral-colors-White, #fff);
 }
-.edit-input-container .edit-controls .btn.send-btn:disabled {
-  background-color: #a0cfff;
-  cursor: not-allowed;
+.image-file {
+  --image-file-pd: 0.75em;
 }
-.header-container {
+.image-file-content {
   position: relative;
+  width: 3.5em;
+  height: 3.5em;
+  cursor: pointer;
 }
-.chat-header {
-  display: flex;
-  justify-content: space-between;
+.image-file-content img {
+  width: 100%;
+  height: 100%;
+  flex-shrink: 0;
+  aspect-ratio: 1/1;
+  border-radius: 0.5em;
+}
+.image-file-content .image-file-colse {
+  position: absolute;
+  right: -0.3125em;
+  top: -0.3125em;
+  width: 0.625em;
+  height: 0.625em;
+  background-color: rgba(0, 0, 0, 0.7);
+  justify-content: center;
   align-items: center;
+  border-radius: 50%;
+  display: none;
 }
-.close-btn {
-  cursor: pointer;
-  color: #666;
+.image-file-content .img-file-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  flex-shrink: 0;
+  aspect-ratio: 1/1;
+  border-radius: 0.5em;
+  background-color: rgba(0, 0, 0, 0.6);
   display: flex;
-  align-items: center;
+  flex-direction: column;
   justify-content: center;
-  padding: 0.5em;
-  border-radius: 0.25em;
-  transition: all 0.2s ease;
+  align-items: center;
 }
-.close-btn:hover {
-  color: #333;
-  transform: scale(1.1);
-  background-color: #f0f0f0;
+.image-file-content .img-file-loading .img-file-title,
+.image-file-content .img-file-loading .img-file-error {
+  color: var(--text-icon-text-icon, #fff);
+  text-align: center;
+  font-family: 'PingFang SC';
+  font-size: 0.75em;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.25em;
 }
-.close-btn:hover svg path {
-  fill: #ff4d4f;
+.image-file-content .img-file-loading .img-file-error {
+  margin-top: 0.375em;
+  color: var(--Danger-Danger-, #f93920);
 }
-.header-title {
-  font-size: 1em;
-  font-weight: bold;
-  color: #333;
+.image-file-content .img-file-loading svg {
+  animation: 0.5s loading steps(32) infinite;
+}
+.image-file-content .img-error-loading svg {
+  animation: null;
+}
+.image-file-content .img-error-loading:hover {
+  opacity: 0.8;
 }
-.header-actions {
+.image-file-content:hover .image-file-colse {
   display: flex;
-  gap: 1em;
 }
-.action-icon {
-  cursor: pointer;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-  transition: all 0.2s ease;
+.image-preview-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.8);
   display: flex;
-  align-items: center;
   justify-content: center;
-  padding: 0.5em;
-  border-radius: 0.25em;
-}
-.action-icon:hover {
-  background-color: #f0f0f0;
-  transform: scale(1.1);
-}
-.new-chat:hover svg path {
-  fill: #1890ff;
-}
-.history:hover svg path {
-  fill: #1890ff;
-}
-/* 历史记录悬浮窗样式 */
-.history-dropdown {
-  position: absolute;
-  top: 3.2em;
-  /* 调整位置以适应您的布局 */
-  right: 1em;
-  width: 18.75em;
-  background-color: white;
-  border-radius: 0.5em;
-  box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.15);
-  z-index: 100;
-  overflow: hidden;
+  align-items: center;
+  z-index: 1000;
 }
-.dropdown-header {
+.image-preview-content {
+  max-width: 90%;
+  max-height: 90%;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
-  padding: 0.625em 1em;
-  border-bottom: 1px solid #f0f0f0;
 }
-.dropdown-title {
-  font-weight: 600;
-  color: #1d2129;
+.image-preview-content img {
+  max-width: 100%;
+  max-height: 100%;
 }
-.dropdown-actions {
-  display: flex;
-  gap: 0.5em;
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
-.new-chat-btn {
-  width: 2em;
-  height: 2em;
-  border-radius: 0.25em;
-  border: none;
-  background-color: #f7f8fa;
-  cursor: pointer;
+.pdf-file {
+  --danger-color: #fc4253;
+  --success-color: #1d77ff;
+  --text-icon: #1d2129;
+  --text-icon-info: #86909c;
   display: flex;
   align-items: center;
-  justify-content: center;
-}
-.new-chat-btn:hover {
-  background-color: #e8ebef;
+  gap: 0.5em;
+  flex-shrink: 0;
+  padding: 0.75em;
+  border-radius: 0.5em;
+  border: 1px solid var(--Border-Border-, #eaecf0);
+  background: var(--Fill-Fill--, #f7f8fa);
+  position: relative;
+  overflow: visible;
 }
-.history-list.is-robot {
-  max-height: 31.25em;
-  overflow-y: auto;
+.pdf-file:hover .pdf-file-colse {
+  display: flex;
 }
-.history-group {
-  padding: 0.5em 0;
+.pdf-file-img {
+  width: 1.625em;
+  height: 1.625em;
+  flex-shrink: 0;
 }
-.group-header {
-  padding: 0.375em 1em;
-  font-size: 0.75em;
-  color: #86909c;
+.pdf-file-reset {
+  cursor: pointer;
 }
-.group-items {
-  list-style: none;
-  padding: 0;
-  margin: 0;
+.pdf-file-reset:hover {
+  opacity: 0.5;
 }
-.history-item {
+.pdf-file-center {
+  width: 11em;
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  flex: 1 0 0;
+  overflow: visible;
+  position: relative;
 }
-.history-item.active {
-  background-color: #e6f7ff;
-  border-left: 0.25em solid #1890ff;
+.pdf-file-center p {
+  font-family: 'PingFang SC';
+  font-size: 0.75em;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.25em;
 }
-.item-content {
-  flex: 1;
-  color: #1d2129;
-  font-size: 0.875em;
-  white-space: nowrap;
+.pdf-file-title {
+  width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-icon, #1d2129);
 }
-.item-actions {
-  margin-left: 0.5em;
+.pdf-file-info {
+  color: var(--text-icon-info, #86909c);
 }
-.more-btn {
-  width: 1.5em;
-  height: 1.5em;
-  border: none;
-  background: none;
+.pdf-file-progress {
+  border-radius: 6.1875em;
+  width: 100%;
+  height: 0.1875em;
+  position: absolute;
+  bottom: 0;
+  left: 2.875em;
+}
+.pdf-file-colse {
+  position: absolute;
   cursor: pointer;
-  color: #86909c;
-  font-size: 0.875em;
-  line-height: 1.5em;
+  right: -0.3125em;
+  top: -0.3125em;
+  width: 0.625em;
+  height: 0.625em;
+  background-color: rgba(0, 0, 0, 0.7);
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  display: none;
 }
-.more-btn:hover {
-  color: #1d2129;
-  background-color: #f0f0f0;
+.pdf-file-tooltip {
+  position: absolute;
+  top: -4em;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 0.25em 0.5em;
   border-radius: 0.25em;
+  font-size: 0.75em;
+  z-index: 1000;
+  max-width: 18.75em;
+  word-break: break-all;
+  white-space: normal;
 }
-.ai-robot-container,
-.ai-robot-container-not-header {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  background-color: #f5f7fa;
-  padding: 1em;
-  box-sizing: border-box;
-}
-.header h1 {
-  font-size: 1.25em;
-  color: #333;
-  margin-bottom: 1.25em;
-  font-weight: 600;
+.pdf-file-tooltip::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -0.3125em;
+  border-width: 0.3125em;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
 }
-.chat-container {
-  flex: 1;
-  overflow: hidden;
+.pdf-error {
+  background: linear-gradient(0deg, rgba(252, 66, 83, 0.05) 0%, rgba(252, 66, 83, 0.05) 100%), #fff;
 }
-.chat-container .message-list {
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 0.625em;
+.pdf-error .pdf-file-title {
+  color: var(--danger-color, #fc4253);
 }
-.chat-container .message-list::-webkit-scrollbar {
-  width: 0.375em;
+.pdf-error .pdf-file-progress {
+  background: var(--danger-color, #fc4253);
 }
-.chat-container .message-list::-webkit-scrollbar-thumb {
-  background-color: #ddd;
-  border-radius: 0.25em;
+.pdf-success .pdf-file-title {
+  color: var(--text-icon, #1d2129);
 }
-.message-item {
-  display: flex;
-  margin-bottom: 1em;
-  max-width: 75%;
-  align-items: flex-start;
+.pdf-success .pdf-file-progress {
+  background: var(--success-color, #1d77ff);
 }
-.message-item.ai-message {
-  align-self: flex-start;
+.pdf-success .pdf-file-reset {
+  opacity: 0;
 }
-.message-item.user-message {
-  margin-left: auto;
+.screenshot-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.1);
+  z-index: 9999;
 }
-.action-button {
-  margin-left: 0.5em;
-  flex-shrink: 0;
-  align-self: flex-end;
+.selection-area {
+  position: absolute;
+  border: 0.25em dashed #0077fa;
+  background-color: rgba(255, 255, 255, 0.2);
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
 }
-.continuous-btn {
-  background-color: #0077fa;
-  color: white;
-  border: none;
-  border-radius: 1.25em;
-  padding: 0.25em 0.75em;
-  font-size: 0.875em;
-  cursor: pointer;
+.screenshot-actions {
+  position: fixed;
+  bottom: 1.25em;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 1.25em;
 }
-.confirm-btn {
-  background-color: #0077fa;
-  color: white;
-  border: none;
-  border-radius: 1.25em;
-  padding: 0.25em 0.75em;
-  font-size: 0.875em;
+.screenshot-actions button {
+  padding: 0.5em 1em;
   cursor: pointer;
 }
-.bottom-area {
-  display: flex;
-  flex-direction: column;
-  gap: 0.625em;
-  padding-top: 0.75em;
-}
-.bottom-area .scene-buttons {
-  display: flex;
-  gap: 0.625em;
-}
-.bottom-area .scene-buttons .scene-btn {
-  display: flex;
-  padding: 0.375em 1em;
-  justify-content: center;
-  align-items: center;
-  gap: 0.375em;
-  border-radius: 0.375em;
-  border: 1px solid var(--Border-Border-, #d8dce4);
-  background: var(--Neutral-colors-White, #fff);
-  color: var(--text-icon-text-icon, #1d2129);
-  text-align: center;
-  /* Body 正文/Medium */
-  font-family: 'PingFang SC';
-  font-size: 0.875em;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.375em;
-  /* 157.143% */
-  cursor: pointer;
-  transition: all 0.2s;
-}
-.bottom-area .scene-buttons .scene-btn:hover {
-  border-color: #0077fa;
-  color: #0077fa;
-}
-.bottom-area .scene-buttons .scene-btn:disabled {
-  background-color: #f5f5f5;
-  color: #ccc;
-  border-color: #e0e0e0;
-  cursor: not-allowed;
-}
-.bottom-area .scene-buttons .scene-btn:disabled:hover {
-  border-color: #e0e0e0;
-  color: #ccc;
-}
-.bottom-area .scene-buttons .scene-btn.active {
-  background-color: #0077fa;
-  color: white;
-  border-color: #0077fa;
-}
-.bottom-area .scene-buttons .scene-btn.active:hover {
-  background-color: #0055cc;
-  border-color: #0055cc;
-  color: white;
-}
-.bottom-area .input-container {
-  display: flex;
-  flex-direction: column;
-  gap: 0.625em;
-  background: #ffffff;
-  padding: 0.5em;
-  justify-content: space-between;
-  align-items: flex-end;
-  align-self: stretch;
-  border-radius: 0.5em;
-  border: 0.5px solid var(--Border-Border-, #d8dce4);
-  background: #fff;
-  box-shadow: 0 0.125em 0.375em 0 rgba(0, 0, 0, 0.1);
-}
-.bottom-area .input-container textarea {
-  width: calc(100% - 1.5em);
-  border: 0;
-  padding: 0.75em;
-  resize: none;
-  height: 3.125em;
-  font-size: 0.875em;
-  outline: none;
-}
-.bottom-area .input-container textarea:focus {
-  border-color: #0077fa;
-}
-.floating-avatar-container {
-  position: fixed;
-  bottom: 1.25em;
-  right: 1.25em;
-  z-index: 1000;
-}
-.floating-avatar {
-  width: 2.875em;
-  height: 3.625em;
-  border-radius: 50%;
-  box-shadow: 0 0.125em 0.625em rgba(0, 0, 0, 0.2);
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-.floating-avatar:hover {
-  transform: scale(1.1);
-  box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.3);
-}
-.slide-up-enter-active,
-.slide-up-leave-active {
-  transition: all 0.3s ease;
-}
-.slide-up-enter-from,
-.slide-up-leave-to {
-  transform: translateY(100%);
-  opacity: 0;
-}
-.ai-robot-container {
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  width: 37.5em;
-  height: 100%;
-  background: white;
-  box-shadow: 0 0.25em 1.25em rgba(0, 0, 0, 0.15);
-  z-index: 999;
-  overflow: hidden;
-}
-.chat-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-.bottom-area {
-  padding: 0.625em;
-}
-.slide-right-enter-from,
-.slide-right-leave-to {
-  transform: translateX(100%);
-  opacity: 0;
-}
-.slide-right-enter-active,
-.slide-right-leave-active {
-  transition: all 0.3s ease;
-}
-.floating-avatar-container {
-  position: fixed;
-  bottom: 1.25em;
-  right: 1.25em;
-  /* 保持悬浮按钮在右下角  */
-  z-index: 1000;
-  cursor: pointer;
-}
-.floating-avatar {
-  width: 3.75em;
-  height: 3.75em;
-  border-radius: 50%;
-  box-shadow: 0 0.25em 0.625em rgba(0, 0, 0, 0.2);
-  transition: all 0.3s ease;
-}
-.floating-avatar:hover {
-  transform: scale(1.1);
-  box-shadow: 0 0.375em 1em rgba(0, 0, 0, 0.3);
-}
-.floating-avatar-container {
-  position: fixed;
-  right: 1.25em;
-  bottom: 1.25em;
-  cursor: pointer;
-}
-.draggable-container {
-  cursor: grab;
-}
-.draggable-container:active {
-  cursor: grabbing;
-}
-.apply-btn {
-  background-color: #0077fa;
-  /* 使用项目主色调 */
-  color: white;
-  /* 白色文字 */
-  border: none;
-  /* 移除默认边框 */
-  border-radius: 1.25em;
-  /* 圆角设计 */
-  padding: 0.375em 1.25em;
-  /* 内边距 */
-  font-size: 0.875em;
-  /* 字体大小 */
-  cursor: pointer;
-  /* 鼠标指针样式 */
-  transition: all 0.3s ease;
-  /* 过渡效果 */
-  box-shadow: 0 0.125em 0.375em rgba(0, 0, 0, 0.1);
-  /* 轻微阴影 */
-  margin-top: 1em;
-  /* 顶部间距 */
-}
-.apply-btn:hover {
-  background-color: #0055cc;
-  /*  hover时深色 */
-  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.15);
-  /* 增强阴影 */
-  transform: translateY(-1px);
-  /* 轻微上浮 */
-}
-.apply-btn:active {
-  transform: translateY(1px);
-  /* 点击时下沉 */
-  box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.1);
-  /* 减小阴影 */
-}
-/* 人脸识别弹窗样式 */
-.face-modal-overlay {
+.dialog-overlay {
   position: fixed;
   top: 0;
   left: 0;
-  right: 0;
-  bottom: 0;
+  width: 100%;
+  height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   display: flex;
-  align-items: center;
   justify-content: center;
-  z-index: 1000;
-}
-.face-modal {
-  width: 18.75em;
-  height: 12.5em;
-  background-color: white;
-  border-radius: 0.75em;
-  display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: space-around;
-  padding: 1.25em;
+  z-index: 2;
 }
-.recognition-header {
-  font-size: 1.125em;
-  color: #0077fa;
-  font-weight: 600;
-}
-.recognition-timer {
-  font-size: 3em;
-  color: #0077fa;
-  font-weight: bold;
-}
-.recognition-footer {
-  font-size: 0.875em;
-  color: #666;
-}
-.hello-chat {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  padding: 1em 0.875em;
-  align-self: stretch;
-}
-.hello-chat img {
-  width: 2.875em;
-  height: 3.625em;
-}
-.hello-chat .title {
-  color: var(--text-icon-text-icon, #1d2129);
-  text-align: center;
-  font-family: 'PingFang SC';
-  font-size: 1.75em;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 2.25em;
-  /* 128.571% */
-}
-.hello-chat .sub-info {
-  color: var(--text-icon-text-icon, #434c59);
-  text-align: center;
-  font-family: 'PingFang SC';
-  font-size: 1em;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.5em;
-  /* 150% */
+.dialog {
+  background-color: white;
+  width: 30%;
+  border-radius: 0.25em;
+  overflow: hidden;
 }
-.function-buttons {
-  width: calc(100% - 2em);
-  padding: 0 1em 1em;
+.dialog-header {
+  padding: 0.9375em;
+  background-color: #f5f7fa;
+  border-bottom: 1px solid #ebeef5;
 }
-.function-buttons ul {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1em;
-  list-style: none;
-  padding: 0;
+.dialog-header h3 {
   margin: 0;
+  font-size: 1.125em;
+  color: #303133;
 }
-.function-buttons ul li {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  width: calc(28% - 0.57em);
-  padding: 0 0.75em;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  border-radius: 0.5em;
-  border: 1px solid #d8dce4;
-  background: #fff;
+.dialog-body {
+  padding: 1.25em 0.9375em;
+  border-bottom: 1px solid #ebeef5;
 }
-.function-buttons ul li:hover {
-  transform: translateY(-2px);
-  border: 1px solid var(--Brand-Brand-, #0077fa);
-  background: var(--Brand-Brand--, #eaf5ff);
+.dialog-body p {
+  margin: 0;
+  color: #606266;
 }
-.function-buttons ul li .icon {
-  width: 1.625em;
-  height: 1.625em;
-  margin-top: 0.5em;
-  margin-right: 0.2em;
-  object-fit: contain;
+.dialog-footer {
+  padding: 0.9375em;
+  text-align: right;
 }
-.function-buttons ul li span {
-  color: var(--text-icon-text-icon, #1d2129);
-  font-family: 'PingFang SC';
+.hang-up-button {
+  padding: 0.5em 1em;
   font-size: 0.875em;
-  font-style: normal;
-  font-weight: 400;
-  text-align: center;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: calc(100% - 2em);
+  cursor: pointer;
+  background-color: #f56c6c;
+  color: white;
+  border: none;
+  border-radius: 0.25em;
 }
-.option-conter {
-  display: flex;
-  gap: 1em;
+.hang-up-button:hover {
+  background-color: #f78989;
 }
-.option-conter .option-item {
-  display: flex;
-  justify-content: flex-start;
-  align-items: unset;
-  flex-direction: column;
-  padding: 0.75em;
-  gap: 0.5em;
-  flex: 1 0 0;
-  border-radius: 1em;
-  border: 1px solid #fff;
-  background: linear-gradient(180deg, #f3f8ff 0%, #ebebff 100%);
+.transcription-result {
+  margin-top: 1.25em;
+  padding: 0.9375em;
+  border: 1px solid #ebeef5;
+  border-radius: 0.25em;
 }
-.option-conter .item-1 .item-top {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+.transcription-result h4 {
+  margin-top: 0;
+  color: #303133;
 }
-.option-conter .item-1 .item-top .item-1-left p {
-  font-family: 'PingFang SC';
+.transcription-result p {
+  color: #606266;
+}
+.touchchat-custom-select {
+  position: relative;
+  display: inline-block;
+  min-width: 8.125em;
   font-size: 0.875em;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 1.375em;
-  /* 157.143% */
-  background: linear-gradient(266deg, #0079ff 6.83%, #5b4fff 95.21%);
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  outline: none;
 }
-.option-conter .item-1 .item-top .item-1-right {
+.touchchat-custom-select .touchchat-select-trigger {
   display: flex;
   align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
-.option-conter .item-1 .item-top .item-1-right span {
-  margin-left: 0.25em;
-  color: var(--Brand-Brand-, #0077fa);
-  font-family: 'PingFang SC';
-  font-size: 0.75em;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-}
-.option-conter .item-1 .item-top .item-1-right:hover span {
-  opacity: 0.8;
-}
-.option-conter .item-1 .item-bottom {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
   justify-content: space-between;
-  padding: 0.75em;
-  flex-shrink: 0;
-  align-self: stretch;
+  background: linear-gradient(to bottom, #ffffff, #f7f7f7);
+  border: 1px solid #e0e0e0;
   border-radius: 0.5em;
-  background: linear-gradient(0deg, #fff 0%, #fff 100%), linear-gradient(180deg, #f2f7fe 0%, #eef0fe 100%);
-}
-.option-conter .item-1 .item-bottom ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-.option-conter .item-1 .item-bottom ul li {
+  padding: 0.625em 0.875em;
   cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 1px 0.125em rgba(0, 0, 0, 0.05);
 }
-.option-conter .item-1 .item-bottom ul li:hover {
-  opacity: 0.8;
-}
-.option-conter .item-1 .item-bottom ul li span {
-  color: var(--text-icon-text-icon, #1d2129);
-  /* Body 正文/Small */
-  font-family: 'PingFang SC';
-  font-size: 0.75em;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.25em;
-  /* 166.667% */
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 10em;
-  display: inline-block;
-}
-.option-conter .item-2 ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  height: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  flex-direction: column;
-}
-.option-conter .item-2 ul li {
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  flex-direction: column;
-  align-self: stretch;
-  padding: 0.25em 0.75em;
-  border-radius: 0.5em;
-  background: linear-gradient(0deg, #fff 0%, #fff 100%), linear-gradient(180deg, #f2f7fe 0%, #eef0fe 100%);
+.touchchat-custom-select .touchchat-select-trigger:hover {
+  background: linear-gradient(to bottom, #ffffff, #fafafa);
+  border-color: #d0d0d0;
+  box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.08);
 }
-.option-conter .item-2 ul li:hover {
-  opacity: 0.8;
+.touchchat-custom-select .touchchat-select-trigger.is-focused {
+  border-color: #409eff;
+  box-shadow: 0 0 0 0.1875em rgba(64, 158, 255, 0.15);
 }
-.option-conter .item-2 ul li p {
-  width: 100%;
+.touchchat-custom-select .touchchat-select-text {
+  color: #444;
+  font-weight: 500;
+  flex-grow: 1;
 }
-.option-conter .item-2 ul li .title {
-  color: var(--text-icon-text-icon, #1d2129);
-  /* Title 标题/Small */
-  font-family: 'PingFang SC';
-  font-size: 0.875em;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 1.375em;
-  /* 157.143% */
+.touchchat-custom-select .touchchat-select-icon {
+  width: 0;
+  height: 0;
+  border-left: 0.375em solid transparent;
+  border-right: 0.375em solid transparent;
+  border-top: 0.375em solid #666;
+  margin-left: 0.5em;
+  transition: transform 0.3s ease;
 }
-.option-conter .item-2 ul li .team {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+.touchchat-custom-select .touchchat-select-icon.is-open {
+  transform: rotate(180deg);
 }
-.option-conter .item-2 ul li .content {
-  color: var(--text-icon-text-icon, #86909c);
-  /* Body 正文/Small */
-  font-family: 'PingFang SC';
-  font-size: 0.75em;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.25em;
-  /* 166.667% */
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 9em;
+.touchchat-custom-select .touchchat-select-dropdown {
+  position: absolute;
+  left: 0;
+  right: 0;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.5em;
+  box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.1);
+  z-index: 100;
+  margin-top: 0.25em;
+  max-height: 12.5em;
+  overflow-y: auto;
 }
-.option-conter .item-3 {
-  padding: 0;
+.touchchat-custom-select .touchchat-select-dropdown.is-upward {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: 0.25em;
 }
-.option-conter .item-3 ul {
-  background: url('./aiRobot/img/bg.png') no-repeat center center;
-  background-size: cover;
-  background-position: center 75%;
-  list-style: none;
-  padding: 0.75em;
-  margin: 0;
-  height: 100%;
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  flex-direction: column;
+.touchchat-custom-select .touchchat-select-dropdown:not(.is-upward) {
+  top: 100%;
 }
-.option-conter .item-3 ul li {
+.touchchat-custom-select .touchchat-select-option {
+  padding: 0.625em 0.875em;
   cursor: pointer;
-  display: flex;
-  height: 1.75em;
-  justify-content: center;
-  align-items: center;
-  align-self: stretch;
-  border-radius: 6.25em;
-  border: 1px solid #fff;
-  background: #fff;
-  margin-bottom: 0.625em;
+  transition: background-color 0.2s ease;
+  color: #444;
 }
-.option-conter .item-3 ul li:hover {
-  opacity: 0.8;
+.touchchat-custom-select .touchchat-select-option:hover {
+  background-color: #f5f7fa;
 }
-.option-conter .item-3 ul li span {
-  color: var(--text-icon-text-icon, #434c59);
-  /* Body 正文/Small */
-  font-family: 'PingFang SC';
-  font-size: 0.75em;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.25em;
-  /* 166.667% */
+.touchchat-custom-select .touchchat-select-option.is-selected {
+  background-color: #e6f7ff;
+  color: #1890ff;
+  font-weight: 500;
 }
-.letter-container .data-content {
-  display: inline-block;
-  position: relative;
-  font-size: 0.875em;
+.touchchat-custom-select .touchchat-select-option:first-child {
+  border-top-left-radius: 0.5em;
+  border-top-right-radius: 0.5em;
 }
-.letter-container .data-content .cursor {
-  animation: blink 1s step-end infinite;
-  margin-left: 0.1em;
-  font-weight: bold;
-  vertical-align: text-bottom;
+.touchchat-custom-select .touchchat-select-option:last-child {
+  border-bottom-left-radius: 0.5em;
+  border-bottom-right-radius: 0.5em;
 }
-@keyframes blink {
-  from,
-  to {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0;
-  }
+:root {
+  --color-primary: #0077fa;
+  --color-primary-plain: #f0f7ff;
+  --color-bg: #fff;
 }
-.apply-btn {
-  background-color: #0077fa;
-  /* 使用项目主色调 */
-  color: white;
-  /* 白色文字 */
-  border: none;
-  /* 移除默认边框 */
-  border-radius: 1.25em;
-  /* 圆角设计 */
-  padding: 0.5em 1.25em;
-  /* 内边距 */
-  font-size: 0.875em;
-  /* 字体大小 */
-  cursor: pointer;
-  /* 鼠标指针样式 */
-  transition: all 0.3s ease;
-  /* 过渡效果 */
-  box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.1);
-  /* 轻微阴影 */
-  margin-top: 1em;
-  /* 顶部间距 */
-}
-.apply-btn:hover {
-  background-color: #0055cc;
-  /*  hover时深色 */
-  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.15);
-  /* 增强阴影 */
-  transform: translateY(-1px);
-  /* 轻微上浮 */
-}
-.apply-btn:active {
-  transform: translateY(1px);
-  /* 点击时下沉 */
-  box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.1);
-  /* 减小阴影 */
-}
-.apply-btn {
-  background-color: #0077fa;
-  /* 使用项目主色调 */
-  color: white;
-  /* 白色文字 */
-  border: none;
-  /* 移除默认边框 */
-  border-radius: 1.25em;
-  /* 圆角设计 */
-  padding: 0.5em 1.25em;
-  /* 内边距 */
-  font-size: 0.875em;
-  /* 字体大小 */
-  cursor: pointer;
-  /* 鼠标指针样式 */
-  transition: all 0.3s ease;
-  /* 过渡效果 */
-  box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.1);
-  /* 轻微阴影 */
-  margin-top: 1em;
-  /* 顶部间距 */
-}
-.apply-btn:hover {
-  background-color: #0055cc;
-  /*  hover时深色 */
-  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.15);
-  /* 增强阴影 */
-  transform: translateY(-1px);
-  /* 轻微上浮 */
-}
-.apply-btn:active {
-  transform: translateY(1px);
-  /* 点击时下沉 */
-  box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.1);
-  /* 减小阴影 */
-}
-.img-test {
-  background: url('../img/default.png');
+@font-face {
+  font-family: 'touchchat-icon';
+  src: url('../font/iconfont.woff2') format('woff2'), url('../font/iconfont.woff') format('woff');
 }