refactor: 情景选择从卡片网格改为横向滚动芯片条

- 将 scenario-picker 网格布局改为 scenario-strip 横向滚动芯片条
- 新增「新建情景」快捷入口芯片（+按钮）
- 新增 scenario.createChip 三语言翻译键

frontend/src/App.css

@@ -1518,95 +1518,123 @@ body {
   border-color: rgba(248, 113, 113, 0.35);
 }
 
-/* ---- Scenario Picker Grid (video panel) ---- */
+/* ---- Scenario Chip Strip (horizontal scroll, video panel) ---- */
 
-.scenario-picker {
+.scenario-strip {
   display: flex;
   flex-direction: column;
   gap: 8px;
+  flex-shrink: 0;
 }
 
-.scenario-picker__title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 2px;
-}
-
-.scenario-picker__label {
+.scenario-strip__label {
   font-size: 0.65rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--color-text-muted);
   opacity: 0.7;
+  padding: 0 2px;
 }
 
-.scenario-picker__active {
-  font-size: 0.7rem;
-  color: var(--color-primary);
-  font-weight: 500;
-}
-
-.scenario-picker__grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 6px;
-}
-
-.scenario-picker__card {
+.scenario-strip__scroll {
   display: flex;
-  flex-direction: column;
+  gap: 6px;
+  overflow-x: auto;
+  padding-bottom: 4px;
+  /* Thin scrollbar - visible but unobtrusive */
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border) transparent;
+}
+
+.scenario-strip__scroll::-webkit-scrollbar {
+  height: 3px;
+}
+
+.scenario-strip__scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.scenario-strip__scroll::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 2px;
+}
+
+.scenario-strip__scroll:hover::-webkit-scrollbar-thumb {
+  background: var(--color-text-muted);
+}
+
+/* Individual scenario chip */
+.scenario-chip {
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  gap: 4px;
-  padding: 10px 4px;
-  border-radius: var(--radius-sm);
+  gap: 5px;
+  padding: 7px 12px;
+  border-radius: 20px;
   border: 1px solid var(--color-border);
   background: var(--color-surface-2);
   color: var(--color-text-muted);
   cursor: pointer;
   transition: all var(--transition-fast);
-  text-align: center;
-  min-width: 0;
+  white-space: nowrap;
+  flex-shrink: 0;
+  font-size: 0.74rem;
+  font-weight: 500;
+  line-height: 1;
 }
 
-.scenario-picker__card:hover {
+.scenario-chip:hover {
   background: var(--color-surface-3);
   border-color: var(--color-surface-3);
   color: var(--color-text);
   transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(10, 10, 15, 0.15);
+  box-shadow: 0 2px 6px rgba(10, 10, 15, 0.12);
 }
 
-.scenario-picker__card:active {
+.scenario-chip:active {
   transform: translateY(0);
 }
 
-.scenario-picker__card--active {
-  background: rgba(59, 130, 246, 0.08);
+/* Active chip */
+.scenario-chip--active {
+  background: rgba(59, 130, 246, 0.1);
   border-color: rgba(59, 130, 246, 0.35);
   color: var(--color-primary);
 }
 
-.scenario-picker__card--active:hover {
-  background: rgba(59, 130, 246, 0.14);
+.scenario-chip--active:hover {
+  background: rgba(59, 130, 246, 0.16);
   border-color: rgba(59, 130, 246, 0.45);
   color: var(--color-primary);
 }
 
-.scenario-picker__card-icon {
-  font-size: 1.3rem;
+/* "+" create new scenario chip */
+.scenario-chip--add {
+  border-style: dashed;
+  opacity: 0.7;
+}
+
+.scenario-chip--add:hover {
+  opacity: 1;
+  border-style: solid;
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+  background: rgba(59, 130, 246, 0.06);
+}
+
+.scenario-chip--add .scenario-chip__icon {
+  font-size: 0.88rem;
+  font-weight: 300;
   line-height: 1;
 }
 
-.scenario-picker__card-name {
-  font-size: 0.68rem;
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
+.scenario-chip__icon {
+  font-size: 0.9rem;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.scenario-chip__name {
   letter-spacing: 0.01em;
 }