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;
 }
 

frontend/src/App.tsx

@@ -401,24 +401,30 @@ function AppContent() {
             )}
           </div>
 
-          {/* ---- 情景选择卡片网格（视频下方） ---- */}
-          <div className="scenario-picker">
-            <div className="scenario-picker__title">
-              <span className="scenario-picker__label">{tr("settings.scenario")}</span>
-              <span className="scenario-picker__active">{activeScenario.icon} {activeScenario.nameKey ? tr(activeScenario.nameKey) : activeScenario.name}</span>
-            </div>
-            <div className="scenario-picker__grid">
+          {/* ---- 情景选择芯片条（视频下方） ---- */}
+          <div className="scenario-strip">
+            <span className="scenario-strip__label">{tr("settings.scenario")}</span>
+            <div className="scenario-strip__scroll">
               {allScenarios.map((sc) => (
                 <button
                   key={sc.id}
-                  className={`scenario-picker__card ${config.scenario === sc.id ? "scenario-picker__card--active" : ""}`}
+                  className={`scenario-chip ${config.scenario === sc.id ? "scenario-chip--active" : ""}`}
                   onClick={() => handleSelectScenario(sc.id)}
                   title={sc.description ? sc.description : sc.descKey ? tr(sc.descKey) : sc.name}
                 >
-                  <span className="scenario-picker__card-icon">{sc.icon}</span>
-                  <span className="scenario-picker__card-name">{sc.nameKey ? tr(sc.nameKey) : sc.name}</span>
+                  <span className="scenario-chip__icon">{sc.icon}</span>
+                  <span className="scenario-chip__name">{sc.nameKey ? tr(sc.nameKey) : sc.name}</span>
                 </button>
               ))}
+              {/* 新建情景快捷入口 */}
+              <button
+                className="scenario-chip scenario-chip--add"
+                onClick={() => setShowCreateScenario(true)}
+                title={tr("scenario.create.button")}
+              >
+                <span className="scenario-chip__icon">+</span>
+                <span className="scenario-chip__name">{tr("scenario.createChip")}</span>
+              </button>
             </div>
           </div>
 

frontend/src/lib/i18n/en-US.ts

@@ -174,6 +174,7 @@ export const enUS: TranslationMap = {
   "settings.scenario.custom": "My Scenarios",
   "settings.scenario.empty": "No custom scenarios yet. Click the button above to create one.",
   "scenario.create.button": "New Scenario",
+  "scenario.createChip": "New",
   "scenario.create.title": "Create Custom Scenario",
   "scenario.edit.title": "Edit Scenario",
   "scenario.create.name": "Scenario Name",

frontend/src/lib/i18n/ja-JP.ts

@@ -174,6 +174,7 @@ export const jaJP: TranslationMap = {
   "settings.scenario.custom": "マイシナリオ",
   "settings.scenario.empty": "カスタムシナリオはまだありません。上のボタンをクリックして作成してください。",
   "scenario.create.button": "新しいシナリオ",
+  "scenario.createChip": "新規",
   "scenario.create.title": "カスタムシナリオを作成",
   "scenario.edit.title": "シナリオを編集",
   "scenario.create.name": "シナリオ名",

frontend/src/lib/i18n/zh-CN.ts

@@ -174,6 +174,7 @@ export const zhCN: TranslationMap = {
   "settings.scenario.custom": "我的情景",
   "settings.scenario.empty": "还没有自建情景，点击上方按钮创建",
   "scenario.create.button": "创建新情景",
+  "scenario.createChip": "新建",
   "scenario.create.title": "创建自建情景",
   "scenario.edit.title": "编辑情景",
   "scenario.create.name": "情景名称",