feat：添加对话情景功能

frontend/src/App.css

@@ -760,6 +760,37 @@ body {
   letter-spacing: 0.02em;
 }
 
+/* ---- Scenario Quick Selector (chat header) ---- */
+.scenario-selector {
+  appearance: none;
+  -webkit-appearance: none;
+  font-size: 0.7rem;
+  font-weight: 500;
+  color: var(--color-text-muted);
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
+  border-radius: 14px;
+  padding: 4px 26px 4px 10px;
+  cursor: pointer;
+  outline: none;
+  transition: all var(--transition-fast);
+  letter-spacing: 0.01em;
+  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23888' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+}
+
+.scenario-selector:hover {
+  border-color: var(--color-primary);
+  color: var(--color-text);
+  background-color: var(--color-surface-3);
+}
+
+.scenario-selector:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
+}
+
 .chat-panel-header__stats {
   font-size: 0.68rem;
   font-weight: 400;
@@ -877,6 +908,31 @@ body {
   opacity: 0.85;
 }
 
+/* ---- System message (scenario switch, etc.) ---- */
+.chat-message--system {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 6px 0;
+  background: transparent;
+}
+
+.chat-message--system::before,
+.chat-message--system::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--color-border);
+}
+
+.chat-message--system__text {
+  font-size: 0.7rem;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+  letter-spacing: 0.02em;
+}
+
 .chat-message__role {
   font-size: 0.62rem;
   font-weight: 600;
@@ -1505,6 +1561,75 @@ body {
   line-height: 1.4;
 }
 
+/* ---- Scenario Selection Cards ---- */
+
+.scenario-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0 24px;
+  max-width: 380px;
+  width: 100%;
+  margin-bottom: 8px;
+}
+
+.scenario-cards__title {
+  font-size: 0.72rem;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-weight: 600;
+  padding: 0 4px 4px;
+}
+
+.scenario-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  text-align: left;
+}
+
+.scenario-card:hover {
+  background: var(--color-surface-3);
+  border-color: var(--color-primary);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
+}
+
+.scenario-card:active {
+  transform: translateY(0);
+}
+
+.scenario-card__icon {
+  font-size: 1.4rem;
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.scenario-card__text {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.scenario-card__title {
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--color-text);
+}
+
+.scenario-card__desc {
+  font-size: 0.72rem;
+  color: var(--color-text-muted);
+  line-height: 1.4;
+}
+
 /* ---- Voice Input Button ---- */
 
 .chat-input__voice {