@touchvue/chat 1.0.0-beta.2 → 1.0.0-beta.4

package/theme/index.css

@@ -1,1959 +1,1577 @@
 :root {
   --ui-color-primary: #409eff;
 }
-.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('./components/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);
+}
+.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;
+}
+.touchchat-markdown ol li:not(:first-child),
+.touchchat-markdown ul li:not(:first-child) {
+  margin-top: 0.5em;
+}
+.touchchat-markdown pre {
+  margin: 1em 0;
 }
-.reasoning-content {
+.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);
+}
+.touchchat-ai-think p:not(:first-child):not(:last-child) {
+  margin: 1em 0;
 }
-.reasoning-content .reasoning-header {
+.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 {
+  content: var(--ai-think-toggle-expand-content);
 }
-.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: 1em;
+  --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: var(--edit-attach-border);
+  --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: '\e607';
+  --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-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: var(--color-primary);
+  --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: #2e91ff;
+  --edit-stop-hover-color: var(--edit-stop-color);
+  --edit-stop-hover-border: var(--edit-stop-border);
+  --edit-stop-active-bg: #005fc7;
+  --edit-stop-active-color: var(--edit-stop-color);
+  --edit-stop-active-border: var(--edit-stop-border);
+}
+.touchchat-edit {
+  margin: var(--edit-margin);
   display: flex;
-  justify-content: center;
-  padding: 0.625em 0;
-  margin-top: 0.625em;
+  flex-direction: column;
+  gap: var(--edit-gap);
+  border: var(--edit-border);
+  border-radius: var(--edit-radius);
+  overflow: hidden;
 }
-.ai-message .loading-indicator svg {
-  width: 1.5em;
-  height: 1.5em;
-  opacity: 0.6;
-  color: #10b981 !important;
+.touchchat-edit:has(textarea:focus) {
+  border: var(--edit-focus-border);
 }
-.ai-message .msg-rich-text.markdown {
-  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% */
+.touchchat-edit-input {
+  border: 0 none;
+  background: var(--edit-input-bg);
 }
-.ai-message .msg-rich-text.markdown h1,
-.reasoning-content h1 {
-  margin: 1.5em 0;
+.touchchat-edit-input textarea {
+  padding: var(--edit-input-padding);
+  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);
 }
-.ai-message .msg-rich-text.markdown h2,
-.reasoning-content h2 {
-  margin: 1.2em 0;
+.touchchat-edit-submit {
+  padding: var(--edit-submit-padding);
+  display: flex;
+  justify-content: space-between;
 }
-.ai-message .msg-rich-text.markdown h3,
-.reasoning-content h3 {
-  margin: 1em 0;
+.touchchat-edit-submit-left {
+  display: inline-flex;
+  gap: var(--edit-submit-gap);
 }
-.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-submit-right {
+  display: inline-flex;
+  gap: var(--edit-submit-gap);
 }
-.loading-indicator {
-  display: flex;
+.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);
 }
-.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;
+}
+.touchchat-edit-attach-icon:before {
+  font-size: var(--edit-attach-size);
+  font-family: var(--edit-attach-family);
+  content: var(--edit-attach-content);
+}
+.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;
+  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;
+}
+.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-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: 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);
 }
-.ai-actions-container {
-  padding: 0.5em;
+.touchchat-edit-stop:hover {
+  background: var(--edit-stop-hover-bg);
+  color: var(--edit-stop-hover-color);
+  border: var(--edit-stop-hover-border);
 }
-.ai-actions-container .ai-actions {
+.touchchat-edit-stop:active {
+  background: var(--edit-stop-active-bg);
+  color: var(--edit-stop-active-color);
+  border: var(--edit-stop-active-border);
+}
+.touchchat-edit-stop-icon:before {
+  font-size: var(--edit-stop-size);
+  font-family: var(--edit-stop-family);
+  content: var(--edit-stop-content);
+}
+.touchchat-dialog {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1em;
   display: flex;
-  justify-content: flex-start;
-  flex-wrap: wrap;
+  flex-direction: column;
+}
+.touchchat-welcome {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.touchchat-dialog-content {
+  margin: 0 auto;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
 }
-.ai-actions-container .ai-actions .action-btn {
+.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: pointer;
-  transition: all 0.2s ease;
-  /* 确保SVG图标居中且不影响定位 */
+  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);
+}
+.touchchat-action-item:before {
+  font-size: var(--action-item-size);
+  content: var(--action-icon-content);
+}
+.touchchat-action-item.value-copy {
+  --action-icon-content: var(--action-copy-content);
+}
+.touchchat-action-item.value-edit {
+  --action-icon-content: var(--action-edit-content);
+}
+.touchchat-action-item.value-remove {
+  --action-icon-content: var(--action-remove-content);
+}
+.touchchat-action-item.value-good {
+  --action-icon-content: var(--action-good-content);
+}
+.touchchat-action-item.value-bad {
+  --action-icon-content: var(--action-bad-content);
+}
+.touchchat-action-item.value-refresh {
+  --action-icon-content: var(--action-refresh-content);
+}
+.touchchat-action-item.value-good.is-on {
+  --action-icon-content: var(--action-good-on-content);
+  color: var(--action-good-on-color);
+}
+.touchchat-action-item.value-bad.is-on {
+  --action-icon-content: var(--action-bad-on-content);
+  color: var(--action-bad-on-color);
+}
+.touchchat-action-item:hover {
+  color: var(--action-item-hover-color);
+  background: var(--action-item-hover-bg);
+  border: var(--action-item-hover-border);
 }
-.ai-actions-container .ai-actions .action-btn .btn-text {
-  /* 修改：从默认隐藏改为绝对定位 */
+.touchchat-action-item:hover .touchchat-action-tip {
+  display: block;
+}
+.touchchat-action-item:active {
+  color: var(--action-item-active-color);
+  background: var(--action-item-active-bg);
+  border: var(--action-item-active-border);
+}
+.touchchat-action-tip {
   position: absolute;
-  top: -2.2em;
-  /* 向上偏移显示 */
   left: 50%;
+  bottom: calc(var(--action-item-height) + var(--action-tip-arrow-size));
   transform: translateX(-50%);
-  /* 水平居中 */
   display: none;
-  padding: 0.25em 0.5em;
-  background-color: #000;
-  /* 黑色背景 */
-  color: #fff;
-  /* 白色文字 */
-  font-size: 0.75em;
-  border-radius: 0.25em;
-  /* 圆角效果 */
+  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;
-  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-action-tip:before {
   content: '';
   position: absolute;
-  bottom: -0.2em;
-  /* 定位在提示框底部 */
+  top: 100%;
   left: 50%;
-  transform: translateX(-50%);
-  border-width: 0.25em 0.25em 0;
+  margin-left: calc(-1 * var(--action-tip-arrow-size));
+  border-width: var(--action-tip-arrow-size);
   border-style: solid;
-  border-color: #000 transparent transparent;
-}
-.ai-actions-container .ai-actions .action-btn:hover {
-  /* 保留SVG原有悬浮效果 */
+  border-color: var(--action-tip-bg) transparent transparent transparent;
 }
-.ai-actions-container .ai-actions .action-btn:hover .btn-text {
-  display: inline-block;
-  /* 悬浮时显示文字 */
+.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;
+  --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: inherit;
+  --add-lite-border: none;
+  --add-lite-hover-bg: rgba(0, 0, 0, 0.1);
+  --add-lite-hover-color: var(--add-lite-color);
+  --add-lite-hover-border: var(--add-lite-border);
+  --add-lite-active-bg: rgba(0, 0, 0, 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;
 }
-.ai-actions-container .ai-actions .action-btn:hover svg {
-  background-color: #eeeeee;
-  border-radius: 50%;
+.touchchat input,
+.touchchat textarea {
+  font-size: 100%;
+  outline: 0 none;
 }
-.ai-actions-container .ai-actions .action-btn svg {
-  flex-shrink: 0;
-  transition: all 0.2s ease;
+.touchchat {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
-.input-area-fixed {
+.touchchat-header {
+  padding: var(--header-padding);
+  display: flex;
+  align-items: center;
+  gap: var(--header-gap);
+  position: fixed;
+  top: 0;
+  left: 0;
   background-color: #ffffff;
-  padding: 1em;
-  flex-shrink: 0;
+  z-index: 86;
 }
-.input-area {
+.touchchat-content {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+.touchchat-side {
+  box-sizing: border-box;
+  height: 100%;
   display: flex;
   flex-direction: column;
-  gap: 0.5em;
+  width: var(--side-width);
+  background: var(--side-bg);
+  padding: var(--side-padding);
+  gap: var(--side-gap);
 }
-.input-container {
+.touchchat-side-header {
   display: flex;
   align-items: center;
-  gap: 0.5em;
+  gap: var(--header-gap);
 }
-textarea {
+.touchchat-logo {
   flex: 1;
-  padding: 0.5em;
-  border: 1px solid #d8dce4;
-  border-radius: 0.25em;
-  resize: none;
-}
-textarea:focus {
-  border: 1px solid #0077fa;
-  outline: none;
-}
-.send-button {
-  padding: 0.5em 0.75em;
-  color: white;
-  border: none;
-  border-radius: 0.25em;
-  cursor: pointer;
-  white-space: nowrap;
-  background-color: #0077fa;
+  display: flex;
+  align-items: center;
+  gap: var(--logo-gap);
 }
-.send-button:disabled {
-  background-color: #b0bec5;
-  cursor: not-allowed;
-  opacity: 0.6;
+.touchchat-logo-pic {
+  width: var(--logo-pic-width);
+  height: var(--logo-pic-height);
+  background: var(--logo-pic-bg);
+  background-size: 100% 100%;
 }
-.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-logo-text {
+  font-weight: var(--logo-text-weight);
+  font-size: var(--logo-text-size);
+  color: var(--logo-text-color);
 }
-.square-icon-btn {
-  width: 2em;
-  height: 2em;
-  border-radius: 0.5em;
-  background-color: #0077fa;
-  color: white;
+.touchchat-add {
+  flex-shrink: 0;
+  width: var(--add-width);
+  background: none;
   display: flex;
   align-items: center;
   justify-content: center;
-  border: none;
+  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;
-  transition: background-color 0.2s;
-  padding: 0;
-  margin-left: 0.5em;
 }
-.square-icon-btn:hover {
-  background-color: #0055cc;
+.touchchat-add:hover {
+  color: var(--add-hover-color);
+  background: var(--add-hover-bg);
+  border: var(--add-hover-border);
 }
-.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-add:active {
+  color: var(--add-active-color);
+  background: var(--add-active-bg);
+  border: var(--add-active-border);
 }
-.input-buttons {
-  display: flex;
-  justify-content: flex-end;
+.touchchat-add-icon:before {
+  font-size: var(--add-icon-size);
+  font-family: var(--add-icon-family);
+  content: var(--add-icon-content);
+  vertical-align: top;
 }
-.rounded-input {
-  border: none !important;
-  outline: none;
-  line-height: 1.375 !important;
-  resize: none !important;
-  box-shadow: none !important;
+.touchchat-add-text {
+  font-size: var(--add-size);
 }
-.deep-thinking-btn {
+.touchchat-hidemenu {
+  box-sizing: border-box;
+  width: var(--hidemenu-width);
+  height: var(--hidemenu-height);
   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;
+  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;
+  width: var(--add-lite-width);
+  height: var(--add-lite-height);
+  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);
+}
+.touchchat-add-lite:hover {
+  color: var(--add-lite-hover-color);
+  background: var(--add-lite-hover-bg);
+  border: var(--add-lite-hover-border);
+}
+.touchchat-add-lite:active {
+  color: var(--add-lite-active-color);
+  background: var(--add-lite-active-bg);
+  border: var(--add-lite-active-border);
+}
+.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);
+}
+.touchchat-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
-.deep-thinking-btn.active {
-  border: 1px solid var(--Brand-Brand-, #0062d6);
-  background: var(--Neutral-colors-White, #fff);
-  color: var(--Brand-Brand-, #0062d6);
+.touchchat-history {
+  flex: 1;
+  overflow: auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--history-gap);
 }
-.deep-thinking-btn.disabled {
-  color: #c9cdd4;
-  cursor: not-allowed;
-  border: 1px solid var(--Border-Border-, #d8dce4);
-  background: var(--Fill-Fill--, #f7f8fa);
+.touchchat-history-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--history-group-gap);
 }
-.controls-container {
+.touchchat-history-title {
+  font-weight: var(--history-title-weight);
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 0.5em 0 0;
-}
-.not-is-thinking {
-  justify-content: flex-end;
+  gap: var(--history-title-gap);
+  padding: var(--history-title-padding);
 }
-.deep-thinking-btn:hover {
-  opacity: 0.8;
+.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);
 }
-.chat-container {
+.touchchat-history-content {
   display: flex;
   flex-direction: column;
-  height: 100vh;
-  width: 100%;
-  overflow: hidden;
+  gap: var(--history-content-gap);
 }
-.chat-messages {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1em;
+.touchchat-history-item {
   display: flex;
-  flex-direction: column;
-}
-.ai-message,
-.user-message {
-  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;
-}
-.msg-rich-text p {
-  line-height: 1.6;
-}
-.msg-rich-text table {
-  width: 100%;
-  border-collapse: separate;
-  margin: 1em 0;
-  font-size: 0.9em;
-}
-.msg-rich-text table th,
-.msg-rich-text table td {
-  padding: 0.75em 1em;
-  border: 1px solid #ddd;
-  text-align: left;
-  vertical-align: top;
-}
-.msg-rich-text table th {
-  background-color: #f5f5f5;
-  font-weight: bold;
-}
-.msg-rich-text table tr:nth-child(even) {
-  background-color: #f9f9f9;
-}
-.msg-rich-text table tr:hover {
-  background-color: #f1f1f1;
-}
-pre {
-  position: relative;
-  margin-top: 2.5em;
-}
-.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;
-  border: none;
-  border-radius: 0.25em;
-  font-size: 0.75em;
+  padding: var(--history-item-padding);
   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;
+  border-radius: var(--history-item-radius);
+  gap: var(--history-item-gap);
   align-items: center;
-  padding: 0.25em 0.25em;
-  border: none;
-  border-radius: 1em;
-  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;
-}
-.dislike-btn.disliked {
-  color: #ff4d4f;
-}
-.retry-btn,
-.copy-btn {
-  color: #666666;
-}
-.ai-actions .like-btn.liked,
-.ai-actions .dislike-btn.disliked {
-  background-color: #f0f5ff;
+  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;
 }
-.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-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;
 }
-.hello-chat-content {
+.touchchat-history-input input {
   width: 100%;
   height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.history-list {
-  flex: 1;
-  overflow-y: auto;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-.history-list li {
-  padding: 0.75em 1em;
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.history-list li:hover {
-  background: var(--Neutral-colors-White, #f2f3f5);
-  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
-}
-.history-list li.active {
-  border-radius: 0.25em;
-  background: var(--Info-Info--, #eaf5ff);
+  font-size: var(--history-item-input-size);
+  border: 0 none;
+  background: none;
 }
-.history-list li.active .history-title {
-  color: #0077fa !important;
+.touchchat-history-input:has(input:focus) {
+  border-color: var(--history-item-input-focus-border-color);
 }
-.history-list li .history-item {
+.touchchat-history-item-text {
+  position: relative;
   flex: 1;
+  white-space: nowrap;
   overflow: hidden;
+  text-overflow: ellipsis;
 }
-.history-list li .history-item .tooltip-container {
-  position: relative;
-  display: inline-block;
-  max-width: 100%;
-}
-.history-list li .history-item .custom-tooltip {
+.touchchat-tooltip {
+  pointer-events: none;
+  z-index: 1000;
   visibility: hidden;
   opacity: 0;
   position: fixed;
   transform: translateX(0%) translateY(-4em);
-  background-color: #000 !important;
-  color: #fff !important;
+  background-color: var(--tooltip-bg);
+  color: var(--tooltip-color);
   text-align: center;
-  padding: 0.375em 0.625em;
-  border-radius: 0.25em;
-  font-size: 0.75em;
+  padding: var(--tooltip-padding);
+  border-radius: var(--tooltip-radius);
   white-space: nowrap;
   transition: opacity 0.2s, visibility 0.2s;
-  box-shadow: 0 0.125em 0.625em rgba(0, 0, 0, 0.2);
+  line-height: var(--tooltip-lh);
 }
-.history-list li .history-item .custom-tooltip::after {
+.touchchat-tooltip:after {
   content: '';
   position: absolute;
   top: 100%;
   left: 50%;
-  margin-left: -0.3125em;
-  border-width: 0.3125em;
+  margin-left: calc(-1 * var(--tooltip-arrow-size));
+  border-width: var(--tooltip-arrow-size);
   border-style: solid;
-  border-color: #000 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;
+  border-color: var(--tooltip-bg) transparent transparent transparent;
 }
-.history-list li .history-item .history-time {
-  display: block;
-  font-size: 0.75em;
-  color: #86909c;
-  margin-top: 0.25em;
+.touchchat-history-item:hover .touchchat-history-fn .touchchat-history-more {
+  opacity: 1;
+  visibility: visible;
 }
-.history-list li .item-actions {
-  position: relative;
-  height: 1.5em;
+.touchchat-history-item:hover .touchchat-tooltip {
+  visibility: visible !important;
+  opacity: 1 !important;
 }
-.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;
-  display: flex;
+.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;
-  color: #000000;
-  opacity: 0;
-  transition: opacity 0.2s, background-color 0.2s;
+  border-radius: var(--history-more-radius);
+  cursor: pointer;
+  color: var(--history-more-color);
+  background: var(--history-more-bg);
   visibility: hidden;
 }
-.history-list li .item-actions:hover .more-btn {
-  opacity: 1;
+.touchchat-history-more:hover {
+  background: var(--history-more-hover-bg);
+}
+.touchchat-history-more:active {
+  background: var(--history-more-active-bg);
+}
+.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);
 }
-.history-list li .item-actions .action-menu {
+.touchchat-history-fn {
+  position: relative;
+  flex-shrink: 0;
+}
+.touchchat-history-float {
   position: absolute;
+  overflow: hidden;
   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);
+  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;
 }
-.history-list li .item-actions .menu-item {
+.touchchat-history-rename {
   display: flex;
   align-items: center;
-  padding: 0.5em 0.75em;
+  padding: var(--history-rename-padding);
+  height: var(--history-rename-height);
   cursor: pointer;
-  transition: background-color 0.2s;
-}
-.history-list li .item-actions .menu-item:hover {
-  background-color: #f3f4f6;
-}
-.history-list li .item-actions .menu-item svg {
-  margin-right: 0.5em;
-}
-.history-list li .item-actions .menu-item.delete-btn {
-  color: #ef4444;
-}
-.history-list .history-item-container:hover .item-actions .more-btn {
-  opacity: 1;
-  visibility: visible;
-}
-.history-list .history-item-container:hover .custom-tooltip {
-  visibility: visible !important;
-  opacity: 1 !important;
+  color: var(--history-rename-color);
+  gap: var(--history-rename-gap);
 }
-.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;
+.touchchat-history-rename:hover {
+  color: var(--history-rename-hover-color);
+  background: var(--history-rename-hover-bg);
+  border: var(--history-rename-hover-border);
 }
-.history-group-header .history-item:hover {
-  background: none !important;
-  cursor: default;
+.touchchat-history-rename:active {
+  color: var(--history-rename-active-color);
+  background: var(--history-rename-active-bg);
+  border: var(--history-rename-active-border);
 }
-.edit-title-input {
-  width: 100%;
-  padding: 0.25em 0.5em;
-  border: 1px solid #ccc;
-  border-radius: 0.25em;
-  font-size: 0.875em;
-  outline: none;
-  box-sizing: border-box;
-  /* 添加样式确保填满容器 */
-  margin: 0;
+.touchchat-history-rename-icon:before {
+  font-family: var(--history-rename-icon-family);
+  font-size: var(--history-rename-icon-size);
+  content: var(--history-rename-icon);
 }
-/* 添加聚焦时的边框样式 */
-.edit-title-input:focus {
-  border-color: #0077fa;
+.touchchat-history-rename-text {
+  font-size: var(--history-rename-size);
 }
-/* 修改历史项容器样式 */
-.history-item-container .history-item {
+.touchchat-history-remove {
   display: flex;
-  flex: 1;
-}
-.tooltip-container {
-  min-width: 0;
-  /* 允许内容收缩 */
+  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);
 }
-.actions-container {
-  padding: 0 0.5em;
+.touchchat-user-content.is-full {
+  flex: 1;
 }
-.actions {
-  display: flex;
-  justify-content: flex-end;
-  flex-wrap: wrap;
-  gap: 0.25em;
+.touchchat-user-avatar {
+  order: 2;
 }
-.ai-actions-container .actions {
-  justify-content: 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;
 }
-.action-btn {
+.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;
-  /* 作为定位容器 */
-  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 {
+.touchchat-user-bubble:before {
   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原有悬浮效果 */
+  display: block;
+  right: calc(-1 * var(--user-bubble-arrow-width));
+  top: 0;
+  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);
 }
-.action-btn:hover .btn-text {
-  display: inline-block;
-  /* 悬浮时显示文字 */
+.touchchat-user-edit:has(textarea:focus) {
+  border-color: var(--user-edit-focus-border-color);
 }
-.action-btn:hover svg {
-  background-color: #eeeeee;
-  border-radius: 50%;
+.touchchat-user-edit-input {
+  width: var(--user-edit-input-width);
+  height: var(--user-edit-input-height);
+  border: var(--user-edit-input-border);
 }
-.action-btn svg {
-  flex-shrink: 0;
-  transition: all 0.2s ease;
+.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);
 }
-.message-type-user .action-btn.edit-btn:hover svg path {
-  fill: #0077fa;
+.touchchat-user-edit-submit {
+  margin-top: var(--user-edit-submit-margin-top);
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--user-edit-submit-gap);
 }
-.message-type-user .action-btn.delete-btn:hover svg path {
-  fill: #ff4d4f;
+.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);
 }
-.action-btn.retry-btn:hover svg path {
-  fill: #0077fa;
+.touchchat-user-send:hover {
+  background: var(--user-send-hover-bg);
+  color: var(--user-send-hover-color);
+  border: var(--user-send-hover-border);
 }
-.action-btn.like-btn.liked svg path {
-  fill: #ff4d4f;
+.touchchat-user-send:active {
+  background: var(--user-send-active-bg);
+  color: var(--user-send-active-color);
+  border: var(--user-send-active-border);
 }
-.action-btn.dislike-btn.disliked svg path {
-  fill: #faad14;
+.touchchat-user-send-text {
+  font-size: var(--user-send-size);
 }
-.history-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background-color: #f7f8fa;
-  position: relative;
+.card-container {
+  padding-top: 0.75em;
 }
-.history-container .app-header {
-  padding: 0.75em 0 0.75em 0.5em;
+.card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  margin-bottom: 1em;
+  padding-bottom: 0.5em;
 }
-.history-container .app-header h1 {
-  margin: 0;
-  font-size: 1.125em;
-  font-weight: 600;
-  color: #374151;
-}
-.history-container .app-header .header-actions {
-  display: flex;
-  gap: 0.75em;
+.header-text {
+  font-size: 0.875em;
+  color: #1d2129;
 }
-.history-container .app-header .header-actions .settings-btn {
-  background: none;
+.switch-btn {
   border: none;
+  background: none;
+  color: #0077fa;
+  font-size: 0.875em;
   cursor: pointer;
-  color: #86909c;
+  padding: 0.25em 0.5em;
 }
-.history-container .app-header .header-actions .settings-btn:hover {
+.switch-btn span {
+  margin-right: 0.5em;
+}
+.switch-btn:hover {
   opacity: 0.8;
   background-color: #eeeeee;
 }
-.history-container .main-content {
+.cards-wrapper {
   display: flex;
-  position: relative;
-  flex: 1;
-  overflow: hidden;
-  background-color: #ffffff;
+  gap: 0.75em;
+  overflow-x: auto;
 }
-.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);
+.card-item {
+  flex: 1;
+  min-width: 12.5em;
+  border: 1px solid #d8dce4;
+  border-radius: 0.5em;
+  padding: 1em;
+  cursor: pointer;
   position: relative;
-}
-.history-container .main-content .history-sidebar.collapsed {
-  transform: translateX(-100%);
-  width: 0;
-  border-right: none;
-  padding: 0;
-  position: absolute;
-}
-.history-container .main-content .history-sidebar.collapsed ~ .chat-area {
-  margin: 0 6.25em;
-}
-.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;
-  align-items: center;
-  justify-content: center;
-}
-.history-container .main-content .history-sidebar .new-chat-btn .add {
-  font-size: 1.5em;
-  margin-right: 0.25em;
-}
-.history-container .main-content .history-sidebar .new-chat-btn:hover {
-  background-color: #0e4cd3;
-  color: #ffffff;
-}
-.history-container .chat-area {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  transition: margin 0.3s ease;
-}
-.history-container .floating {
-  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;
-  display: flex;
-  align-items: center;
-  gap: 0.5em;
-}
-.history-container .floating svg:hover,
-.history-container .floating span:hover {
-  background-color: #eeeeee;
-  opacity: 0.8;
-}
-.history-container .floating span {
-  font-size: 1.5em;
-}
-.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;
-}
-.context-menu .context-menu-item {
-  padding: 0.5em 0.75em;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-.context-menu .context-menu-item:hover {
-  background-color: #f3f4f6;
-}
-.search-box {
-  padding: 0.75em;
-  border-bottom: 1px solid #eaecf0;
-  display: flex;
-  gap: 0.5em;
-}
-.search-box input {
-  flex: 1;
-  padding: 0.5em 0.75em;
-  border: 1px solid #eaecf0;
-  border-radius: 0.375em;
-  outline: none;
-}
-.search-box input:focus {
-  border-color: #10b981;
-}
-.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;
-}
-.user-message .message-content {
-  flex-direction: row-reverse;
-  display: flex;
-  align-items: flex-start;
-}
-.user-message .text-content {
-  background-color: #0077fa;
-  color: white;
-  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('./components/aiChat/img/corner.png') no-repeat;
-  content: '';
-  background-size: 100% 100%;
-  width: 0.625em;
-  height: 0.625em;
-  display: inline-block;
-  position: absolute;
-  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;
-}
-.edit-buttons {
-  display: flex;
-  gap: 0.625em;
-  margin-top: 0.5em;
-}
-.edit-buttons .save-btn,
-.edit-buttons .cancel-btn {
-  padding: 0.375em 0.75em;
-  border: none;
-  border-radius: 0.25em;
-  cursor: pointer;
-}
-.edit-buttons .save-btn:hover,
-.edit-buttons .cancel-btn:hover {
-  opacity: 0.8;
-}
-.edit-buttons .save-btn {
-  background-color: #42b983;
-  color: white;
-}
-.edit-buttons .save-btn:disabled {
-  opacity: 0.8;
-  cursor: not-allowed;
-}
-.edit-buttons .cancel-btn {
-  background-color: #f5f5f5;
-}
-.user-message-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5em;
-}
-.user-message-wrapper .msg-content-container .msg-rich-text .line {
-  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% */
-}
-.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;
-}
-.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;
-}
-.edit-input-container .edit-controls {
-  display: flex;
-  justify-content: flex-end;
-  padding: 0.5em;
-  gap: 0.5em;
-}
-.edit-input-container .edit-controls .btn {
-  padding: 0.375em 1em;
-  border-radius: 0.25em;
-  font-size: 0.875em;
-  cursor: pointer;
-}
-.edit-input-container .edit-controls .btn.cancel-btn {
-  background-color: #ffffff;
-  color: #4e5969;
-  border: 1px solid #e5e6eb;
-}
-.edit-input-container .edit-controls .btn.send-btn {
-  background-color: #1890ff;
-  color: #ffffff;
-  border: none;
-}
-.edit-input-container .edit-controls .btn.send-btn:disabled {
-  background-color: #e8f3ff;
-  cursor: not-allowed;
-}
-.edit-input-container .edit-controls .btn:hover {
-  opacity: 0.8;
-}
-.card-container {
-  padding-top: 0.75em;
-}
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1em;
-  padding-bottom: 0.5em;
-}
-.header-text {
-  font-size: 0.875em;
-  color: #1d2129;
-}
-.switch-btn {
-  border: none;
-  background: none;
-  color: #0077fa;
-  font-size: 0.875em;
-  cursor: pointer;
-  padding: 0.25em 0.5em;
-}
-.switch-btn span {
-  margin-right: 0.5em;
-}
-.switch-btn:hover {
-  opacity: 0.8;
-  background-color: #eeeeee;
-}
-.cards-wrapper {
-  display: flex;
-  gap: 0.75em;
-  overflow-x: auto;
-}
-.card-item {
-  flex: 1;
-  min-width: 12.5em;
-  border: 1px solid #d8dce4;
-  border-radius: 0.5em;
-  padding: 1em;
-  cursor: pointer;
-  position: relative;
-  transition: all 0.2s ease;
+  transition: all 0.2s ease;
 }
 .card-item.selected {
-  border-color: #0077fa;
-  background-color: #f0f7ff;
-}
-.card-title {
-  font-size: 1em;
-  font-weight: 500;
-  color: #1d2129;
-  margin: 0 0 0.5em 0;
-}
-.card-desc {
-  font-size: 0.875em;
-  color: #4e5969;
-  line-height: 1.5;
-  word-break: break-word;
-}
-.check-mark {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-.file-view {
-  margin: 0.5em 0;
-  display: flex;
-  width: 15em;
-  padding: 0.5em 0.75em;
-  align-items: center;
-  gap: 0.5em;
-  border-radius: 0.5em;
-  border: 1px solid #eaecf0;
-  background: #f7f8fa;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-.file-view:hover {
-  border-color: #0077ff;
-  background-color: #f0f7ff;
-}
-.file-icon {
-  width: 1.5em;
-  height: 1.5em;
-  flex-shrink: 0;
-}
-.file-info {
-  flex: 1;
-  min-width: 0;
-}
-.file-name {
-  font-size: 0.875em;
-  color: #1d2129;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.file-size {
-  font-size: 0.75em;
-  color: #86909c;
-}
-.file-action {
-  color: #4e5969;
-  transition: color 0.2s ease;
-}
-.file-view:hover .file-action {
-  color: #0077ff;
-}
-.hello-chat {
-  display: flex;
-  flex-direction: column;
-  padding: 1em;
-  align-items: flex-start;
-  gap: 1em;
-}
-.hello-chat .title {
-  color: var(--text-icon-text-icon, #1d2129);
-  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);
-  /* Body 正文/Large */
-  font-family: 'PingFang SC';
-  font-size: 1em;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.5em;
-  /* 150% */
-}
-.function-buttons {
-  width: calc(100% - 2em);
-  padding: 0 1em 1em;
-}
-.function-buttons ul {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1em;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-.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;
-}
-.function-buttons ul li:hover {
-  transform: translateY(-0.125em);
-  border: 1px solid var(--Brand-Brand-, #0077fa);
-  background: var(--Brand-Brand--, #eaf5ff);
-}
-.function-buttons ul li .icon {
-  width: 1.625em;
-  height: 1.625em;
-  margin-top: 0.5em;
-  margin-right: 0.2em;
-  object-fit: contain;
-}
-.function-buttons ul li span {
-  color: var(--text-icon-text-icon, #1d2129);
-  font-family: 'PingFang SC';
-  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);
-}
-.image-view {
-  display: flex;
-  height: 28.635em;
-  justify-content: center;
-  align-items: center;
-  align-self: stretch;
-  aspect-ratio: 847.5/458.16;
-  overflow: hidden;
-  position: relative;
-}
-.image-content {
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-  object-position: center;
-  transition: transform 0.2s ease;
-}
-.image-view:hover .image-content {
-  transform: scale(1.02);
-}
-.link-container {
-  max-width: 35em;
-  display: flex;
-  padding: 0.75em;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.75em;
-  align-self: stretch;
-  margin: 0.5em 0;
-  border-radius: 0.5em;
-  border: 0.5px solid #d8dce4;
-  background: #f7f8fa;
-}
-.link-url {
-  display: flex;
-  align-items: center;
-  gap: 0.5em;
-  margin-bottom: 0.75em;
-  color: #0077fa;
-  font-size: 0.875em;
-  cursor: pointer;
-}
-.link-icon {
-  width: 0.75em;
-  height: 0.75em;
-  flex-shrink: 0;
-}
-.url-text {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: inherit;
-  text-decoration: none;
-}
-.link-content {
-  display: flex;
-  gap: 0.75em;
-}
-.content-image {
-  width: 2.8125em;
-  flex-shrink: 0;
-  align-self: flex-start;
-  aspect-ratio: 15/14;
-  background: url('./components/aiChat/img/link.png') lightgray center center / contain no-repeat;
-}
-.info-content {
-  flex: 1;
-  min-width: 0;
-}
-.link-title {
-  font-size: 1em;
-  font-weight: 500;
-  color: #1d2129;
-  margin: 0 0 0.25em 0;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  display: -moz-box;
-  -moz-line-clamp: 1;
-  -moz-box-orient: vertical;
-  line-clamp: 1;
-}
-.link-desc {
-  font-size: 0.875em;
-  color: #4e5969;
-  margin: 0;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  display: -moz-box;
-  -moz-line-clamp: 2;
-  -moz-box-orient: vertical;
-  line-clamp: 2;
-}
-.text-content-wrapper {
-  display: flex;
-  flex-direction: column;
-}
-.is-editing {
-  width: 100%;
-}
-.is-editing .edit-input-container {
-  margin-left: -10px;
-}
-.message-item {
-  display: flex;
-  flex-direction: row;
-  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;
-}
-.edit-input-container .edit-controls {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 0.625em;
-  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;
-}
-.edit-input-container .edit-controls .btn.cancel-btn:hover {
-  background-color: #e8e8e8;
-}
-.edit-input-container .edit-controls .btn.send-btn {
-  background-color: #4096ff;
-  color: white;
-}
-.edit-input-container .edit-controls .btn.send-btn:hover {
-  background-color: #66b1ff;
-}
-.edit-input-container .edit-controls .btn.send-btn:disabled {
-  background-color: #a0cfff;
-  cursor: not-allowed;
-}
-.header-container {
-  position: relative;
-}
-.chat-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.close-btn {
-  cursor: pointer;
-  color: #666;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5em;
-  border-radius: 0.25em;
-  transition: all 0.2s ease;
-}
-.close-btn:hover {
-  color: #333;
-  transform: scale(1.1);
-  background-color: #f0f0f0;
-}
-.close-btn:hover svg path {
-  fill: #ff4d4f;
-}
-.header-title {
-  font-size: 1em;
-  font-weight: bold;
-  color: #333;
-}
-.header-actions {
-  display: flex;
-  gap: 1em;
-}
-.action-icon {
-  cursor: pointer;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-  transition: all 0.2s ease;
-  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;
-}
-.dropdown-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.625em 1em;
-  border-bottom: 1px solid #f0f0f0;
-}
-.dropdown-title {
-  font-weight: 600;
-  color: #1d2129;
-}
-.dropdown-actions {
-  display: flex;
-  gap: 0.5em;
-}
-.new-chat-btn {
-  width: 2em;
-  height: 2em;
-  border-radius: 0.25em;
-  border: none;
-  background-color: #f7f8fa;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.new-chat-btn:hover {
-  background-color: #e8ebef;
-}
-.history-list.is-robot {
-  max-height: 31.25em;
-  overflow-y: auto;
-}
-.history-group {
-  padding: 0.5em 0;
-}
-.group-header {
-  padding: 0.375em 1em;
-  font-size: 0.75em;
-  color: #86909c;
-}
-.group-items {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-.history-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-}
-.history-item.active {
-  background-color: #e6f7ff;
-  border-left: 0.25em solid #1890ff;
-}
-.item-content {
-  flex: 1;
-  color: #1d2129;
-  font-size: 0.875em;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.item-actions {
-  margin-left: 0.5em;
-}
-.more-btn {
-  width: 1.5em;
-  height: 1.5em;
-  border: none;
-  background: none;
-  cursor: pointer;
-  color: #86909c;
-  font-size: 0.875em;
-  line-height: 1.5em;
-}
-.more-btn:hover {
-  color: #1d2129;
-  background-color: #f0f0f0;
-  border-radius: 0.25em;
-}
-.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;
-}
-.chat-container {
-  flex: 1;
-  overflow: hidden;
-}
-.chat-container .message-list {
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 0.625em;
-}
-.chat-container .message-list::-webkit-scrollbar {
-  width: 0.375em;
-}
-.chat-container .message-list::-webkit-scrollbar-thumb {
-  background-color: #ddd;
-  border-radius: 0.25em;
-}
-.message-item {
-  display: flex;
-  margin-bottom: 1em;
-  max-width: 75%;
-  align-items: flex-start;
-}
-.message-item.ai-message {
-  align-self: flex-start;
-}
-.message-item.user-message {
-  margin-left: auto;
-}
-.action-button {
-  margin-left: 0.5em;
-  flex-shrink: 0;
-  align-self: flex-end;
-}
-.continuous-btn {
-  background-color: #0077fa;
-  color: white;
-  border: none;
-  border-radius: 1.25em;
-  padding: 0.25em 0.75em;
-  font-size: 0.875em;
-  cursor: pointer;
-}
-.confirm-btn {
-  background-color: #0077fa;
-  color: white;
-  border: none;
-  border-radius: 1.25em;
-  padding: 0.25em 0.75em;
-  font-size: 0.875em;
-  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;
+  border-color: #0077fa;
+  background-color: #f0f7ff;
 }
-.floating-avatar-container {
-  position: fixed;
-  bottom: 1.25em;
-  right: 1.25em;
-  /* 保持悬浮按钮在右下角  */
-  z-index: 1000;
-  cursor: pointer;
+.card-title {
+  font-size: 1em;
+  font-weight: 500;
+  color: #1d2129;
+  margin: 0 0 0.5em 0;
 }
-.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);
-}
-.apply-btn {
-  background-color: #0077fa;
-  /* 使用项目主色调 */
-  color: white;
-  /* 白色文字 */
-  border: none;
-  /* 移除默认边框 */
-  border-radius: 1.25em;
-  /* 圆角设计 */
-  padding: 0.375em 1.25em;
-  /* 内边距 */
+.card-desc {
   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 {
-  position: fixed;
+  color: #4e5969;
+  line-height: 1.5;
+  word-break: break-word;
+}
+.check-mark {
+  position: absolute;
   top: 0;
-  left: 0;
   right: 0;
-  bottom: 0;
-  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;
+.file-view {
+  margin: 0.5em 0;
   display: flex;
-  flex-direction: column;
+  width: 15em;
+  padding: 0.5em 0.75em;
   align-items: center;
-  justify-content: space-around;
-  padding: 1.25em;
+  gap: 0.5em;
+  border-radius: 0.5em;
+  border: 1px solid #eaecf0;
+  background: #f7f8fa;
+  cursor: pointer;
+  transition: all 0.2s ease;
 }
-.recognition-header {
-  font-size: 1.125em;
-  color: #0077fa;
-  font-weight: 600;
+.file-view:hover {
+  border-color: #0077ff;
+  background-color: #f0f7ff;
 }
-.recognition-timer {
-  font-size: 3em;
-  color: #0077fa;
-  font-weight: bold;
+.file-icon {
+  width: 1.5em;
+  height: 1.5em;
+  flex-shrink: 0;
+}
+.file-info {
+  flex: 1;
+  min-width: 0;
 }
-.recognition-footer {
+.file-name {
   font-size: 0.875em;
-  color: #666;
+  color: #1d2129;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.file-size {
+  font-size: 0.75em;
+  color: #86909c;
+}
+.file-action {
+  color: #4e5969;
+  transition: color 0.2s ease;
+}
+.file-view:hover .file-action {
+  color: #0077ff;
 }
 .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;
+  padding: 1em;
+  align-items: flex-start;
+  gap: 1em;
 }
 .hello-chat .title {
   color: var(--text-icon-text-icon, #1d2129);
-  text-align: center;
   font-family: 'PingFang SC';
   font-size: 1.75em;
   font-style: normal;
@@ -1963,7 +1581,7 @@ pre {
 }
 .hello-chat .sub-info {
   color: var(--text-icon-text-icon, #434c59);
-  text-align: center;
+  /* Body 正文/Large */
   font-family: 'PingFang SC';
   font-size: 1em;
   font-style: normal;
@@ -1996,7 +1614,7 @@ pre {
   background: #fff;
 }
 .function-buttons ul li:hover {
-  transform: translateY(-2px);
+  transform: translateY(-0.125em);
   border: 1px solid var(--Brand-Brand-, #0077fa);
   background: var(--Brand-Brand--, #eaf5ff);
 }
@@ -2019,283 +1637,108 @@ pre {
   text-overflow: ellipsis;
   max-width: calc(100% - 2em);
 }
-.option-conter {
-  display: flex;
-  gap: 1em;
-}
-.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%);
-}
-.option-conter .item-1 .item-top {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.option-conter .item-1 .item-top .item-1-left p {
-  font-family: 'PingFang SC';
-  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;
-}
-.option-conter .item-1 .item-top .item-1-right {
+.image-view {
   display: flex;
-  align-items: center;
+  height: 28.635em;
   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-items: center;
   align-self: stretch;
-  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 {
-  cursor: pointer;
+  aspect-ratio: 847.5/458.16;
+  overflow: hidden;
+  position: relative;
 }
-.option-conter .item-1 .item-bottom ul li:hover {
-  opacity: 0.8;
+.image-content {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  object-position: center;
+  transition: transform 0.2s ease;
 }
-.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;
+.image-view:hover .image-content {
+  transform: scale(1.02);
 }
-.option-conter .item-2 ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  height: 100%;
+.link-container {
+  max-width: 35em;
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
+  padding: 0.75em;
   flex-direction: column;
-}
-.option-conter .item-2 ul li {
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
   align-items: flex-start;
-  flex-direction: column;
+  gap: 0.75em;
   align-self: stretch;
-  padding: 0.25em 0.75em;
+  margin: 0.5em 0;
   border-radius: 0.5em;
-  background: linear-gradient(0deg, #fff 0%, #fff 100%), linear-gradient(180deg, #f2f7fe 0%, #eef0fe 100%);
-}
-.option-conter .item-2 ul li:hover {
-  opacity: 0.8;
-}
-.option-conter .item-2 ul li p {
-  width: 100%;
-}
-.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% */
+  border: 0.5px solid #d8dce4;
+  background: #f7f8fa;
 }
-.option-conter .item-2 ul li .team {
+.link-url {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 0.5em;
+  margin-bottom: 0.75em;
+  color: #0077fa;
+  font-size: 0.875em;
+  cursor: pointer;
 }
-.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% */
+.link-icon {
+  width: 0.75em;
+  height: 0.75em;
+  flex-shrink: 0;
+}
+.url-text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 9em;
-}
-.option-conter .item-3 {
-  padding: 0;
+  color: inherit;
+  text-decoration: none;
 }
-.option-conter .item-3 ul {
-  background: url('./components/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%;
+.link-content {
   display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  flex-direction: column;
+  gap: 0.75em;
 }
-.option-conter .item-3 ul li {
-  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;
+.content-image {
+  width: 2.8125em;
+  flex-shrink: 0;
+  align-self: flex-start;
+  aspect-ratio: 15/14;
+  background: url('./components/aiChat/img/link.png') lightgray center center / contain no-repeat;
 }
-.option-conter .item-3 ul li:hover {
-  opacity: 0.8;
+.info-content {
+  flex: 1;
+  min-width: 0;
 }
-.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% */
+.link-title {
+  font-size: 1em;
+  font-weight: 500;
+  color: #1d2129;
+  margin: 0 0 0.25em 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  display: -moz-box;
+  -moz-line-clamp: 1;
+  -moz-box-orient: vertical;
+  line-clamp: 1;
 }
-.letter-container .data-content {
-  display: inline-block;
-  position: relative;
+.link-desc {
   font-size: 0.875em;
+  color: #4e5969;
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  display: -moz-box;
+  -moz-line-clamp: 2;
+  -moz-box-orient: vertical;
+  line-clamp: 2;
 }
-.letter-container .data-content .cursor {
-  animation: blink 1s step-end infinite;
-  margin-left: 0.1em;
-  font-weight: bold;
-  vertical-align: text-bottom;
-}
-@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');
 }