@liberseek/boft-cli-win32-arm64 0.6.4 → 0.6.6

package/app/renderer-extension.js

@@ -15526,6 +15526,9 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     accountCredits: accountCreditsSnapshotSchema.optional()
   }).strict();
 
+  // ../shared-contracts/dist/reasoning-transcript.js
+  var REASONING_TRANSCRIPT_COMMAND = "thinking";
+
   // ../shared-contracts/dist/harness-session-import.js
   var HARNESS_SESSION_IMPORT_ID_MAX_LENGTH = 1024;
   var HARNESS_SESSION_IMPORT_CWD_MAX_LENGTH = 16384;
@@ -17079,13 +17082,7 @@ ${error51.stderrTail}`] : []
       copyPrompt.setAttribute("aria-describedby", `${item.key}-install-prompt-tooltip`);
       setActionButtonLabel(copyPrompt, "copy", messages.connectionCopyPrompt);
       copyPrompt.addEventListener("click", () => {
-        copyTextToClipboard(
-          document2,
-          copyPrompt,
-          prompt,
-          messages,
-          messages.connectionCopyPrompt
-        );
+        copyTextToClipboard(document2, copyPrompt, prompt, messages, messages.connectionCopyPrompt);
       });
       const tooltip = document2.createElement("div");
       tooltip.id = `${item.key}-install-prompt-tooltip`;
@@ -17693,6 +17690,9 @@ ${error51.stderrTail}`] : []
     connectionSection: "Connections",
     generalSection: "General",
     otherSection: "Other",
+    appearanceDescription: "Adjust how thinking text is displayed in the conversation.",
+    reasoningSoftWrapTitle: "Wrap thinking text",
+    reasoningSoftWrapDescription: "Wrap long thinking lines in the transcript. Ordinary shell output is unaffected. Off by default.",
     pageUnavailable: "Page unavailable",
     inDevelopment: "In development",
     notAvailable: "Not available",
@@ -17729,30 +17729,30 @@ ${error51.stderrTail}`] : []
     sessionImportPathCopyFailed: "Copy failed",
     sessionImportRetryOpen: "Try opening again",
     sessionImportRetrying: "Opening...",
-    connectionsDescription: "Add and configure Agent Harnesses supported by the system.",
     pluginsDescription: "Extend and manage Codex plugins.",
     pluginsRefresh: "Scan environment",
     pluginsRefreshing: "Scanning...",
-    accountsDescription: "Choose the default account for new Codex tasks and check account limits.",
-    accountTaskHint: "Existing tasks keep the account they were created with. Multi-account is currently available for Codex.",
-    accountConnected: "Connected accounts",
-    accountDefaultBadge: "Default",
-    accountAdd: "Add Account",
+    connectionsDescription: "View runtime status by Host. Select an item to inspect details or complete its setup.",
+    accountsDescription: "View accounts and limits across Agents, and manage your Codex default account.",
+    accountConnected: "Accounts",
+    accountDefaultBadge: "Codex default",
+    accountAdd: "Add Codex account",
     accountColumnAccount: "Account",
-    accountColumnUsage: "Limits",
-    accountColumnActions: "Actions",
-    accountSearch: "Search accounts\u2026",
-    accountEmpty: "No accounts yet. Add an account to get started.",
+    accountColumnActions: "Manage",
+    accountSearch: "Search accounts or Agents\u2026",
+    accountEmpty: "No accounts yet. Add a Codex account or sign in to an Agent in its native client.",
     accountNoMatches: "No matching accounts.",
-    accountLoginHelp: "Before signing in",
-    harnessAccountsTitle: "Other detected accounts",
+    accountNativeManaged: "Native management",
+    accountNativeManagementHint: "This account comes from {harness}'s native authentication. This page only displays identity and limits; manage sign-in, sign-out and switching in the native client.",
+    accountMore: "Codex account actions",
+    accountDetailsClose: "Close account details",
+    accountDefaultHint: "Use as the default for new Codex tasks only",
     accountCreditsRemaining: "Remaining",
     accountCreditsLoading: "Loading limits\u2026",
     accountCreditsEmpty: "No limit data available",
     accountCreditsFailed: "Could not load limits",
     accountCreditsRetry: "Retry",
     accountCreditsRefresh: "Refresh limits",
-    accountResetCreditsUnknown: "No reset card data available",
     accountCreateFailed: "Could not add the Account.",
     accountDelete: "Delete",
     accountDeleteConfirm: "Delete this Account and its local data? This cannot be undone.",
@@ -17762,7 +17762,6 @@ ${error51.stderrTail}`] : []
     accountUse: "Set as default",
     accountSignIn: "Sign in",
     accountSigningIn: "Starting device sign-in...",
-    accountDeviceCodePrerequisite: "Before signing in, enable \u201CEnable device code authorization for Codex\u201D in Web Settings \u2192 Account security & sign-in.",
     accountVerificationDescription: "Open the verification page and enter this one-time code:",
     accountCopyCode: "Copy code",
     accountCopied: "Copied",
@@ -17773,8 +17772,13 @@ ${error51.stderrTail}`] : []
     accountAuthApiPrefix: "API",
     accountAuthChatPrefix: "Account",
     accountAuthApiIdentityFallback: "BANK OF TOKEN",
+    accountSectionApi: "API",
+    accountSectionChat: "Accounts",
     accountCreditsUsed: "Used",
-    accountCreditsReset: "reset",
+    accountCreditsResetAt: "Quota resets: {time}",
+    accountCreditsResetIn: "Quota resets in {time}",
+    accountCreditsResetPending: "Awaiting refresh",
+    accountCreditsResetPendingHint: "The reset time has passed; refresh to check the actual quota.",
     accountCreditsPeriodWeekly: "Weekly limit",
     accountCreditsPeriodMonthly: "Monthly limit",
     accountCreditsPeriodFiveHour: "5-hour",
@@ -17907,6 +17911,7 @@ ${error51.stderrTail}`] : []
     pageLabels: Object.freeze({
       connections: "Agents",
       plugins: "Plugins",
+      appearance: "Appearance",
       accounts: "Accounts",
       "session-import": "Sessions",
       updates: "Updates",
@@ -17921,6 +17926,9 @@ ${error51.stderrTail}`] : []
     connectionSection: "\u8FDE\u63A5",
     generalSection: "\u901A\u7528",
     otherSection: "\u5176\u4ED6",
+    appearanceDescription: "\u8C03\u6574\u4F1A\u8BDD\u4E2D\u601D\u8003\u6587\u672C\u7684\u663E\u793A\u65B9\u5F0F\u3002",
+    reasoningSoftWrapTitle: "\u6362\u884C\u663E\u793A\u601D\u8003\u6587\u672C",
+    reasoningSoftWrapDescription: "\u8BA9\u601D\u8003\u5757\u4E2D\u7684\u957F\u884C\u81EA\u52A8\u6362\u884C\u3002\u666E\u901A Shell \u8F93\u51FA\u4E0D\u53D7\u5F71\u54CD\u3002\u9ED8\u8BA4\u5173\u95ED\u3002",
     pageUnavailable: "\u9875\u9762\u4E0D\u53EF\u7528",
     inDevelopment: "\u5F00\u53D1\u4E2D",
     notAvailable: "\u6682\u4E0D\u53EF\u7528",
@@ -17957,30 +17965,30 @@ ${error51.stderrTail}`] : []
     sessionImportPathCopyFailed: "\u590D\u5236\u5931\u8D25",
     sessionImportRetryOpen: "\u91CD\u8BD5\u6253\u5F00",
     sessionImportRetrying: "\u6B63\u5728\u6253\u5F00\u2026\u2026",
-    connectionsDescription: "\u6DFB\u52A0\u548C\u914D\u7F6E\u7CFB\u7EDF\u4E2D\u652F\u6301\u7684 Agent Harness\u3002",
     pluginsDescription: "\u6269\u5C55\u548C\u7BA1\u7406 Codex \u7684\u63D2\u4EF6\u3002",
     pluginsRefresh: "\u626B\u63CF\u73AF\u5883",
     pluginsRefreshing: "\u6B63\u5728\u626B\u63CF...",
-    accountsDescription: "\u9009\u62E9\u65B0\u5EFA Codex \u4EFB\u52A1\u7684\u9ED8\u8BA4\u8D26\u53F7\uFF0C\u5E76\u67E5\u770B\u5404\u8D26\u53F7\u989D\u5EA6\u3002",
-    accountTaskHint: "\u5207\u6362\u9ED8\u8BA4\u8D26\u53F7\u4E0D\u4F1A\u5F71\u54CD\u5DF2\u5F00\u59CB\u7684\u4EFB\u52A1\u3002\u76EE\u524D\u4EC5\u652F\u6301 Codex \u591A\u8D26\u53F7\u3002",
-    accountConnected: "\u5DF2\u8FDE\u63A5\u8D26\u53F7",
-    accountDefaultBadge: "\u9ED8\u8BA4",
-    accountAdd: "\u6DFB\u52A0\u8D26\u53F7",
+    connectionsDescription: "\u6309 Host \u67E5\u770B\u8FD0\u884C\u65F6\u72B6\u6001\u3002\u9009\u62E9\u4E00\u9879\uFF0C\u5728\u53F3\u4FA7\u68C0\u67E5\u8BE6\u60C5\u6216\u5B8C\u6210\u914D\u7F6E\u3002",
+    accountsDescription: "\u67E5\u770B\u5404 Agent \u7684\u8D26\u53F7\u4E0E\u989D\u5EA6\uFF0C\u7BA1\u7406 Codex \u9ED8\u8BA4\u8D26\u53F7\u3002",
+    accountConnected: "\u8D26\u53F7",
+    accountDefaultBadge: "Codex \u9ED8\u8BA4",
+    accountAdd: "\u6DFB\u52A0 Codex \u8D26\u53F7",
     accountColumnAccount: "\u8D26\u53F7",
-    accountColumnUsage: "\u989D\u5EA6",
-    accountColumnActions: "\u64CD\u4F5C",
-    accountSearch: "\u641C\u7D22\u8D26\u53F7\u2026",
-    accountEmpty: "\u8FD8\u6CA1\u6709\u8D26\u53F7\uFF0C\u6DFB\u52A0\u4E00\u4E2A\u8D26\u53F7\u5373\u53EF\u5F00\u59CB\u3002",
+    accountColumnActions: "\u7BA1\u7406",
+    accountSearch: "\u641C\u7D22\u8D26\u53F7\u6216 Agent\u2026",
+    accountEmpty: "\u8FD8\u6CA1\u6709\u8D26\u53F7\uFF0C\u53EF\u6DFB\u52A0 Codex \u8D26\u53F7\u6216\u5728\u5176\u4ED6 Agent \u7684\u539F\u751F\u5BA2\u6237\u7AEF\u767B\u5F55\u3002",
     accountNoMatches: "\u6CA1\u6709\u5339\u914D\u7684\u8D26\u53F7\u3002",
-    accountLoginHelp: "\u767B\u5F55\u524D\u987B\u77E5",
-    harnessAccountsTitle: "\u5176\u4ED6\u5DF2\u8BC6\u522B\u8D26\u53F7",
+    accountNativeManaged: "\u539F\u751F\u7BA1\u7406",
+    accountNativeManagementHint: "\u6B64\u8D26\u53F7\u6765\u81EA {harness} \u7684\u539F\u751F\u767B\u5F55\u3002\u8FD9\u91CC\u53EA\u8BFB\u5C55\u793A\u8EAB\u4EFD\u4E0E\u989D\u5EA6\uFF1B\u767B\u5F55\u3001\u9000\u51FA\u548C\u5207\u6362\u8BF7\u5728\u5176\u539F\u751F\u5BA2\u6237\u7AEF\u4E2D\u5B8C\u6210\u3002",
+    accountMore: "Codex \u8D26\u53F7\u64CD\u4F5C",
+    accountDetailsClose: "\u5173\u95ED\u8D26\u53F7\u8BE6\u60C5",
+    accountDefaultHint: "\u4EC5\u8BBE\u4E3A\u65B0 Codex \u4EFB\u52A1\u7684\u9ED8\u8BA4\u8D26\u53F7",
     accountCreditsRemaining: "\u5269\u4F59",
     accountCreditsLoading: "\u6B63\u5728\u8BFB\u53D6\u989D\u5EA6\u2026",
     accountCreditsEmpty: "\u6682\u65E0\u989D\u5EA6\u6570\u636E",
     accountCreditsFailed: "\u989D\u5EA6\u8BFB\u53D6\u5931\u8D25",
     accountCreditsRetry: "\u91CD\u8BD5",
     accountCreditsRefresh: "\u5237\u65B0\u989D\u5EA6",
-    accountResetCreditsUnknown: "\u6682\u65E0\u91CD\u7F6E\u5361\u6570\u636E",
     accountCreateFailed: "\u6DFB\u52A0\u8D26\u53F7\u5931\u8D25\u3002",
     accountDelete: "\u5220\u9664",
     accountDeleteConfirm: "\u5220\u9664\u6B64\u8D26\u53F7\u53CA\u5176\u672C\u5730\u6570\u636E\uFF1F\u6B64\u64CD\u4F5C\u65E0\u6CD5\u64A4\u9500\u3002",
@@ -17990,7 +17998,6 @@ ${error51.stderrTail}`] : []
     accountUse: "\u8BBE\u4E3A\u9ED8\u8BA4",
     accountSignIn: "\u767B\u5F55",
     accountSigningIn: "\u6B63\u5728\u542F\u52A8\u8BBE\u5907\u767B\u5F55...",
-    accountDeviceCodePrerequisite: "\u767B\u5F55\u524D\uFF0C\u8BF7\u5148\u5728 Web \u7AEF\u7684\u201C\u8BBE\u7F6E \u2192 \u8D26\u53F7\u5B89\u5168\u4E0E\u767B\u5F55\u201D\u4E2D\u5F00\u542F\u201C\u4E3A Codex \u542F\u7528\u8BBE\u5907\u4EE3\u7801\u6388\u6743\u201D\u3002",
     accountVerificationDescription: "\u6253\u5F00\u9A8C\u8BC1\u9875\u9762\u5E76\u8F93\u5165\u4EE5\u4E0B\u4E00\u6B21\u6027\u4EE3\u7801\uFF1A",
     accountCopyCode: "\u590D\u5236\u4EE3\u7801",
     accountCopied: "\u5DF2\u590D\u5236",
@@ -18001,8 +18008,13 @@ ${error51.stderrTail}`] : []
     accountAuthApiPrefix: "API",
     accountAuthChatPrefix: "\u8D26\u53F7",
     accountAuthApiIdentityFallback: "BANK OF TOKEN",
+    accountSectionApi: "API \u63A5\u5165",
+    accountSectionChat: "\u8D26\u53F7\u63A5\u5165",
     accountCreditsUsed: "\u5DF2\u7528",
-    accountCreditsReset: "\u91CD\u7F6E",
+    accountCreditsResetAt: "\u989D\u5EA6\u91CD\u7F6E\u65F6\u95F4\uFF1A{time}",
+    accountCreditsResetIn: "\u8DDD\u91CD\u7F6E\u8FD8\u6709 {time}",
+    accountCreditsResetPending: "\u5F85\u5237\u65B0",
+    accountCreditsResetPendingHint: "\u91CD\u7F6E\u65F6\u95F4\u5DF2\u5230\uFF0C\u8BF7\u5237\u65B0\u4EE5\u786E\u8BA4\u5B9E\u9645\u989D\u5EA6\u3002",
     accountCreditsPeriodWeekly: "\u5468\u989D\u5EA6",
     accountCreditsPeriodMonthly: "\u6708\u989D\u5EA6",
     accountCreditsPeriodFiveHour: "5 \u5C0F\u65F6",
@@ -18135,6 +18147,7 @@ ${error51.stderrTail}`] : []
     pageLabels: Object.freeze({
       connections: "Agents",
       plugins: "\u63D2\u4EF6",
+      appearance: "\u5916\u89C2",
       accounts: "\u8D26\u53F7",
       "session-import": "\u4F1A\u8BDD",
       updates: "\u66F4\u65B0",
@@ -19997,6 +20010,36 @@ ${error51.stderrTail}`] : []
   function rendererUsageTriggerMaxWidth() {
     return "min(180px, 30vw)";
   }
+  function rendererUsageCompactParts(usage, locale = "en", mode = "default") {
+    const messages = rendererUsageMessages(locale);
+    const hasContext = usage?.contextUsedTokens !== void 0 && usage.contextWindowTokens !== void 0 && usage.contextWindowTokens > 0;
+    if (mode === "context" && usage && hasContext) {
+      return [
+        formatRendererContextSummary(usage.contextUsedTokens ?? 0, usage.contextWindowTokens ?? 0)
+      ];
+    }
+    const parts = [
+      usage?.totalCredits !== void 0 ? formatRendererCredits(usage.totalCredits) : null,
+      usage?.cacheHitRatePercent !== void 0 ? formatRendererCacheHitRate(usage.cacheHitRatePercent) : null,
+      usage?.outputTokensPerSecond !== void 0 ? formatRendererTokenRate(usage.outputTokensPerSecond, locale) : null,
+      usage?.totalCostUsd !== void 0 ? formatRendererCost(usage.totalCostUsd) : null
+    ].filter((value) => value !== null);
+    if (usage?.contextUsagePercent !== void 0 && parts.length === 0) parts.push(messages.usage);
+    if (parts.length === 0 && hasContext && usage?.contextWindowTokens !== void 0) {
+      parts.push(
+        formatRendererContextSummary(usage.contextUsedTokens ?? 0, usage.contextWindowTokens)
+      );
+    }
+    if (parts.length === 0 && usage?.totalTokens !== void 0) {
+      parts.push(`${formatRendererTokenCount(usage.totalTokens)} ${messages.tokensSummary}`);
+    }
+    if (parts.length === 0 && (usage?.inputTokens !== void 0 || usage?.outputTokens !== void 0)) {
+      parts.push(
+        `${formatRendererTokenCount((usage?.inputTokens ?? 0) + (usage?.outputTokens ?? 0))} ${messages.tokensSummary}`
+      );
+    }
+    return parts;
+  }
   function rendererUsageHasDisplayData(usage) {
     return usage?.cacheHitRatePercent !== void 0 || usage?.outputTokensPerSecond !== void 0 || usage?.totalCostUsd !== void 0 || usage?.totalCredits !== void 0 || usage?.contextUsagePercent !== void 0 || usage?.contextUsedTokens !== void 0 && usage.contextWindowTokens !== void 0 || usage?.totalTokens !== void 0 || usage?.inputTokens !== void 0 || usage?.cachedInputTokens !== void 0 || usage?.cacheWriteInputTokens !== void 0 || usage?.outputTokens !== void 0 || usage?.reasoningOutputTokens !== void 0;
   }
@@ -20244,42 +20287,18 @@ ${error51.stderrTail}`] : []
     document.body.append(popover);
     return control;
   }
-  function renderRendererUsageControl(control, usage, locale = control.locale, accountName = null) {
+  function renderRendererUsageControl(control, usage, locale = control.locale, accountName = null, compactMode = "default") {
     control.locale = locale;
     const messages = rendererUsageMessages(locale);
     control.popover.setAttribute("aria-label", messages.threadUsageDetails);
-    const cacheHitRatePercent = usage?.cacheHitRatePercent;
-    const outputTokensPerSecond = usage?.outputTokensPerSecond;
-    const totalCostUsd = usage?.totalCostUsd;
-    const hasContext = usage?.contextUsedTokens !== void 0 && usage.contextWindowTokens !== void 0;
-    const hasTokenUsage = usage?.totalTokens !== void 0 || usage?.inputTokens !== void 0 || usage?.cachedInputTokens !== void 0 || usage?.cacheWriteInputTokens !== void 0 || usage?.outputTokens !== void 0 || usage?.reasoningOutputTokens !== void 0;
     const visible = rendererUsageHasDisplayData(usage) || Boolean(accountName);
     control.root.style.display = visible ? "inline-flex" : "none";
     if (!visible) {
       closePopover(control);
       return false;
     }
-    const summary = [
-      usage?.totalCredits !== void 0 ? formatRendererCredits(usage.totalCredits) : null,
-      cacheHitRatePercent !== void 0 ? formatRendererCacheHitRate(cacheHitRatePercent) : null,
-      outputTokensPerSecond !== void 0 ? formatRendererTokenRate(outputTokensPerSecond, locale) : null,
-      totalCostUsd !== void 0 ? formatRendererCost(totalCostUsd) : null
-    ].filter((value) => value !== null);
+    const summary = rendererUsageCompactParts(usage, locale, compactMode);
     const contextPercent = usage?.contextUsagePercent;
-    if (contextPercent !== void 0 && summary.length === 0) summary.push(messages.usage);
-    if (summary.length === 0 && hasContext && usage?.contextWindowTokens !== void 0 && usage.contextWindowTokens > 0) {
-      summary.push(
-        formatRendererContextSummary(usage.contextUsedTokens ?? 0, usage.contextWindowTokens)
-      );
-    }
-    if (summary.length === 0 && usage?.totalTokens !== void 0) {
-      summary.push(`${formatRendererTokenCount(usage.totalTokens)} ${messages.tokensSummary}`);
-    }
-    if (summary.length === 0 && hasTokenUsage) {
-      summary.push(
-        `${formatRendererTokenCount((usage?.inputTokens ?? 0) + (usage?.outputTokens ?? 0))} ${messages.tokensSummary}`
-      );
-    }
     const compactSummary = summary.join(" \xB7 ") || messages.usage;
     const accessibleSummary = `${messages.threadUsage}: ${compactSummary}${contextPercent !== void 0 ? `; ${messages.context} ${decimal(contextPercent, 1)}%` : ""}`;
     control.trigger.style.maxWidth = rendererUsageTriggerMaxWidth();
@@ -20663,29 +20682,19 @@ ${error51.stderrTail}`] : []
     document.body.append(popover);
     return control;
   }
+  function composerCreditsChipVisible(accountCredits) {
+    return accountCredits !== null && accountCredits.usedPercent !== void 0;
+  }
+  function composerAccountCredits(accountCredits) {
+    const credits = accountCredits ?? null;
+    return composerCreditsChipVisible(credits) ? credits : null;
+  }
   function renderRendererCreditsControl(control, accountCredits, locale = "en") {
-    if (accountCredits === null) {
+    if (!composerCreditsChipVisible(accountCredits)) {
       control.root.style.display = "none";
       closePopover2(control);
       return false;
     }
-    if (accountCredits.usedPercent === void 0) {
-      const amount = accountCredits.remaining === void 0 || !accountCredits.unit ? null : formatAccountCreditsBalance(accountCredits.remaining, accountCredits.unit);
-      if (!amount) {
-        control.root.style.display = "none";
-        closePopover2(control);
-        return false;
-      }
-      const ringSlot2 = control.trigger.querySelector("[data-codexhost-credits-ring]");
-      const label2 = control.trigger.querySelector("[data-codexhost-credits-label]");
-      ringSlot2?.replaceChildren();
-      if (label2) label2.textContent = amount;
-      control.root.style.display = "inline-flex";
-      control.trigger.setAttribute("aria-label", amount);
-      control.trigger.title = amount;
-      renderDetails2(control.popover, accountCredits, locale);
-      return true;
-    }
     const remaining = remainingPercent(accountCredits.usedPercent);
     const percent = formatRendererCreditsPercent(remaining);
     const title = `${creditsPeriodLabel(accountCredits.periodType)} ${percent}`;
@@ -21118,9 +21127,20 @@ ${error51.stderrTail}`] : []
   function buttonText(button) {
     return controlDescription(button);
   }
+  var OWNED_RENDERER_CONTROL_SELECTOR = [
+    `[${CONTROL_ATTRIBUTE}]`,
+    "[data-codexhost-model-control]",
+    "[data-codexhost-permission-mode-control]",
+    "[data-codexhost-usage-control]",
+    "[data-codexhost-credits-control]",
+    "[data-codexhost-harness-command-control]"
+  ].join(", ");
   function isOwnedRendererControl(element) {
     return element.hasAttribute(CONTROL_ATTRIBUTE) || element.hasAttribute("data-codexhost-model-control") || element.hasAttribute("data-codexhost-permission-mode-control") || element.hasAttribute("data-codexhost-usage-control") || element.hasAttribute("data-codexhost-credits-control") || element.hasAttribute("data-codexhost-harness-command-control");
   }
+  function isInsideOwnedRendererControl(element) {
+    return typeof element.closest === "function" ? Boolean(element.closest(OWNED_RENDERER_CONTROL_SELECTOR)) : isOwnedRendererControl(element);
+  }
   function isComposerSubmitButton(button) {
     if (button.type === "submit") return true;
     return /(^|\s)(send|submit|发送|提交)(\s|$)/u.test(buttonText(button));
@@ -21369,6 +21389,33 @@ ${error51.stderrTail}`] : []
       parent.insertBefore(control.permissionModePicker.root, candidate);
     }
   }
+  function leftoverNativeModelButtons(composer) {
+    return [...composer.querySelectorAll('button[aria-haspopup="menu"]')].filter(
+      (element) => !isInsideOwnedRendererControl(element) && !isNativeModelControlCandidate(element)
+    );
+  }
+  function syncLeftoverNativeModelControls(control, hide) {
+    control.leftoverNativeModelControls ??= [];
+    if (!hide) {
+      for (const state of control.leftoverNativeModelControls) restoreNativeControl(state);
+      control.leftoverNativeModelControls = [];
+      return;
+    }
+    const buttons = leftoverNativeModelButtons(control.composer);
+    const keep = new Set(buttons);
+    control.leftoverNativeModelControls = control.leftoverNativeModelControls.filter((state) => {
+      if (keep.has(state.element)) return true;
+      restoreNativeControl(state);
+      return false;
+    });
+    const known = new Set(control.leftoverNativeModelControls.map((state) => state.element));
+    for (const button of buttons) {
+      if (known.has(button)) continue;
+      const captured = captureNativeControl(button);
+      if (captured) control.leftoverNativeModelControls.push(captured);
+    }
+    for (const state of control.leftoverNativeModelControls) setNativeControlHidden(state, true);
+  }
   function setNativeControlHidden(state, hidden) {
     if (!state) return;
     if (!hidden) {
@@ -21392,6 +21439,7 @@ ${error51.stderrTail}`] : []
     refreshUsagePlacement(control);
     refreshCreditsPlacement(control);
     setNativeControlHidden(control.nativeModelControl, hideModel);
+    syncLeftoverNativeModelControls(control, hideModel);
     setNativeControlHidden(control.nativeContextUsageControl, false);
     setNativeControlHidden(control.nativePermissionModeControl, hidePermissionMode);
   }
@@ -21445,7 +21493,8 @@ ${error51.stderrTail}`] : []
       usage: null,
       harnessCommands,
       sendButton,
-      sendDisabledBeforeSwitch: null
+      sendDisabledBeforeSwitch: null,
+      leftoverNativeModelControls: []
     };
     refreshTrailingClusterPlacement(control);
     refreshUsagePlacement(control);
@@ -21501,14 +21550,19 @@ ${error51.stderrTail}`] : []
         control.usage,
         usage,
         locale,
-        selectedCodexAccount?.email ?? selectedCodexAccount?.label ?? null
+        selectedCodexAccount?.email ?? selectedCodexAccount?.label ?? null,
+        state.agent === "codex" ? "default" : "context"
       );
     }
     control.harnessCommands.setLocale(locale);
     control.harnessCommands.root.hidden = state.agent === "codex";
     control.harnessCommands.root.style.display = state.agent === "codex" ? "none" : "inline-flex";
     if (state.agent === "codex") control.harnessCommands.close();
-    renderRendererCreditsControl(control.credits, accountCredits, locale);
+    renderRendererCreditsControl(
+      control.credits,
+      selectedCodexAccount && codexAccountAuthKind(selectedCodexAccount) === "api" ? null : composerAccountCredits(accountCredits),
+      locale
+    );
   }
   function disposeComposerAgentControl(control) {
     if (control.sendDisabledBeforeSwitch !== null) {
@@ -21517,6 +21571,8 @@ ${error51.stderrTail}`] : []
     restoreNativeControl(control.nativeModelControl);
     restoreNativeControl(control.nativeContextUsageControl);
     restoreNativeControl(control.nativePermissionModeControl);
+    for (const state of control.leftoverNativeModelControls) restoreNativeControl(state);
+    control.leftoverNativeModelControls = [];
     control.credits.dispose();
     control.usage?.dispose();
     control.usage = null;
@@ -21526,6 +21582,51 @@ ${error51.stderrTail}`] : []
     control.picker.dispose();
   }
 
+  // src/renderer-transcript-dom.ts
+  var TRANSCRIPT_TEXT_BODY_SELECTOR = '[data-testid="exec-shell-body"]';
+  var REASONING_SOFT_WRAP_STORAGE_KEY = "codexhost.reasoning-soft-wrap.v1";
+  var REASONING_SOFT_WRAP_CHANGE_EVENT = "codexhost:reasoning-soft-wrap-changed";
+  function readReasoningTranscriptSoftWrap(ownerWindow) {
+    return ownerWindow.localStorage.getItem(REASONING_SOFT_WRAP_STORAGE_KEY) === "true";
+  }
+  function setReasoningTranscriptSoftWrap(ownerWindow, enabled) {
+    ownerWindow.localStorage.setItem(REASONING_SOFT_WRAP_STORAGE_KEY, String(enabled));
+    ownerWindow.dispatchEvent(new Event(REASONING_SOFT_WRAP_CHANGE_EVENT));
+  }
+  function installReasoningTranscriptSoftWrap(ownerDocument) {
+    const ownerWindow = ownerDocument.defaultView;
+    if (!ownerWindow) return () => {
+    };
+    const style = ownerDocument.createElement("style");
+    style.setAttribute("data-codexhost-reasoning-soft-wrap", "true");
+    const body = `${TRANSCRIPT_TEXT_BODY_SELECTOR}:has([aria-label="$ ${REASONING_TRANSCRIPT_COMMAND}"])`;
+    style.textContent = `
+    ${body} .whitespace-pre {
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+    }
+    ${body} .whitespace-pre > .w-max {
+      width: 100%;
+      min-width: 0;
+    }
+  `;
+    ownerDocument.head.append(style);
+    const refresh = () => {
+      style.disabled = !readReasoningTranscriptSoftWrap(ownerWindow);
+    };
+    const onStorage = (event) => {
+      if (event.key === REASONING_SOFT_WRAP_STORAGE_KEY || event.key === null) refresh();
+    };
+    refresh();
+    ownerWindow.addEventListener(REASONING_SOFT_WRAP_CHANGE_EVENT, refresh);
+    ownerWindow.addEventListener("storage", onStorage);
+    return () => {
+      ownerWindow.removeEventListener(REASONING_SOFT_WRAP_CHANGE_EVENT, refresh);
+      ownerWindow.removeEventListener("storage", onStorage);
+      style.remove();
+    };
+  }
+
   // src/renderer-codex-account-state.ts
   function resolveCodexAccountSelection(accounts, overrideAccountId) {
     const activeAccountId = accounts.find((account) => account.active)?.accountId ?? null;
@@ -25245,6 +25346,50 @@ ${error51.stderrTail}`] : []
     });
   }
 
+  // src/settings/appearance-page.ts
+  function createAppearanceSettingsPage(messages) {
+    return Object.freeze({
+      id: "appearance",
+      label: messages.pageLabels.appearance,
+      icon: "settings",
+      mount(context) {
+        const document2 = context.content.ownerDocument;
+        const ownerWindow = document2.defaultView;
+        if (!ownerWindow) return;
+        const heading = document2.createElement("div");
+        heading.className = "settings-section-label";
+        heading.textContent = messages.pageLabels.appearance;
+        const description = document2.createElement("p");
+        description.className = "settings-page-description";
+        description.textContent = messages.appearanceDescription;
+        const row = document2.createElement("label");
+        row.className = "settings-preference-row";
+        const copy = document2.createElement("span");
+        copy.className = "settings-preference-row__copy";
+        const title = document2.createElement("strong");
+        title.textContent = messages.reasoningSoftWrapTitle;
+        const detail = document2.createElement("span");
+        detail.textContent = messages.reasoningSoftWrapDescription;
+        copy.append(title, detail);
+        const checkbox = document2.createElement("input");
+        checkbox.type = "checkbox";
+        checkbox.className = "settings-preference-checkbox";
+        checkbox.checked = readReasoningTranscriptSoftWrap(ownerWindow);
+        checkbox.setAttribute("aria-label", messages.reasoningSoftWrapTitle);
+        checkbox.addEventListener("change", () => {
+          setReasoningTranscriptSoftWrap(ownerWindow, checkbox.checked);
+        });
+        const sync = () => {
+          checkbox.checked = readReasoningTranscriptSoftWrap(ownerWindow);
+        };
+        ownerWindow.addEventListener(REASONING_SOFT_WRAP_CHANGE_EVENT, sync);
+        row.append(copy, checkbox);
+        context.content.append(heading, description, row);
+        return () => ownerWindow.removeEventListener(REASONING_SOFT_WRAP_CHANGE_EVENT, sync);
+      }
+    });
+  }
+
   // src/settings/release-notes.ts
   var HEADING_PATTERN = /^(#{1,6})[ \t]+(.+?)\s*$/u;
   var BLOCKQUOTE_PATTERN = /^>[ \t]?(.*?)\s*$/u;
@@ -25420,6 +25565,140 @@ ${error51.stderrTail}`] : []
     }
   }
 
+  // src/settings/accounts-details.ts
+  function createAccountDetails(document2, messages, input) {
+    const root = document2.createElement("div");
+    root.className = "settings-account-details";
+    const trigger = document2.createElement("button");
+    trigger.type = "button";
+    trigger.className = "settings-icon-button";
+    trigger.title = input.triggerLabel ?? input.label;
+    trigger.disabled = input.disabled ?? false;
+    trigger.dataset.accountFocus = input.focusKey;
+    trigger.setAttribute("aria-label", trigger.title);
+    trigger.setAttribute("aria-haspopup", "dialog");
+    trigger.append(createRendererSettingsIcon(input.icon, 16));
+    const dialog = document2.createElement("dialog");
+    dialog.className = "settings-account-dialog";
+    dialog.id = `settings-account-${input.focusKey}-dialog`;
+    dialog.setAttribute("aria-label", input.label);
+    trigger.setAttribute("aria-controls", dialog.id);
+    const heading = document2.createElement("h2");
+    heading.textContent = input.label;
+    const description = document2.createElement("p");
+    description.textContent = input.description;
+    description.id = `${dialog.id}-description`;
+    dialog.setAttribute("aria-describedby", description.id);
+    const close = document2.createElement("button");
+    close.type = "button";
+    close.className = "settings-icon-button settings-account-dialog__close";
+    close.dataset.accountFocus = `${input.focusKey}:close`;
+    close.setAttribute("aria-label", messages.accountDetailsClose);
+    close.append(createRendererSettingsIcon("close", 16));
+    close.addEventListener("click", () => dialog.close());
+    dialog.addEventListener("close", () => {
+      if (trigger.isConnected && !trigger.disabled) trigger.focus({ preventScroll: true });
+    });
+    dialog.addEventListener(
+      "click",
+      (event) => {
+        if (input.actions.some((action) => action.contains(event.target))) {
+          trigger.focus({ preventScroll: true });
+          dialog.close();
+        }
+      },
+      { capture: true }
+    );
+    const actions = document2.createElement("div");
+    actions.className = "settings-account-dialog__actions";
+    actions.append(...input.actions);
+    dialog.append(close, heading, description, actions);
+    trigger.addEventListener("click", () => dialog.showModal());
+    root.append(trigger, dialog);
+    return root;
+  }
+
+  // src/settings/accounts-reset-time.ts
+  function formatAccountResetCountdown(value, messages, now = Date.now()) {
+    const timestamp = Date.parse(value);
+    if (!Number.isFinite(timestamp)) return null;
+    const minutes = Math.max(0, Math.ceil((timestamp - now) / 6e4));
+    if (minutes === 0) {
+      return {
+        text: messages.accountCreditsResetPending,
+        description: messages.accountCreditsResetPendingHint
+      };
+    }
+    const chinese = messages.locale === "zh-CN";
+    const parts = [
+      { value: Math.floor(minutes / 1440), unit: "d", label: chinese ? "\u5929" : " days" },
+      { value: Math.floor(minutes % 1440 / 60), unit: "h", label: chinese ? "\u5C0F\u65F6" : " hours" },
+      { value: minutes % 60, unit: "m", label: chinese ? "\u5206\u949F" : " minutes" }
+    ].filter((part, index) => part.value > 0 && (minutes < 1440 || index < 2));
+    return {
+      text: parts.map((part) => `${part.value}${part.unit}`).join(""),
+      description: messages.accountCreditsResetIn.replace(
+        "{time}",
+        parts.map(
+          (part) => `${part.value}${!chinese && part.value === 1 ? part.label.slice(0, -1) : part.label}`
+        ).join(chinese ? "" : " ")
+      )
+    };
+  }
+  function updateCountdown(element, messages) {
+    const value = formatAccountResetCountdown(element.dataset.resetsAt ?? "", messages);
+    if (!value) return;
+    element.textContent = value.text;
+    element.title = value.description;
+    element.setAttribute("aria-label", value.description);
+  }
+  function renderAccountResetTime(document2, value, messages) {
+    const date5 = new Date(value);
+    if (!Number.isFinite(date5.getTime())) return null;
+    const countdown = document2.createElement("span");
+    countdown.className = "settings-account-usage__countdown";
+    countdown.dataset.resetsAt = date5.toISOString();
+    updateCountdown(countdown, messages);
+    const timestamp = document2.createElement("time");
+    timestamp.className = "settings-account-usage__sub";
+    timestamp.dateTime = date5.toISOString();
+    const pad = (number4) => String(number4).padStart(2, "0");
+    timestamp.textContent = `${pad(date5.getMonth() + 1)}/${pad(date5.getDate())} ${pad(date5.getHours())}:${pad(date5.getMinutes())}`;
+    timestamp.title = messages.accountCreditsResetAt.replace(
+      "{time}",
+      date5.toLocaleString(messages.locale, {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+        timeZoneName: "short"
+      })
+    );
+    timestamp.setAttribute("aria-label", timestamp.title);
+    return { countdown, timestamp };
+  }
+  function mountAccountResetCountdowns(list, messages, signal) {
+    const window2 = list.ownerDocument.defaultView;
+    if (!window2 || signal.aborted) return () => void 0;
+    const refresh = () => {
+      if (signal.aborted) return;
+      for (const element of list.querySelectorAll("[data-resets-at]")) {
+        updateCountdown(element, messages);
+      }
+    };
+    const timer = window2.setInterval(refresh, 6e4);
+    window2.addEventListener("focus", refresh);
+    const stop = () => {
+      window2.clearInterval(timer);
+      window2.removeEventListener("focus", refresh);
+      signal.removeEventListener("abort", stop);
+    };
+    signal.addEventListener("abort", stop, { once: true });
+    return stop;
+  }
+
   // src/settings/accounts-usage.ts
   function creditsPeriodLabel2(periodType, messages) {
     if (periodType === "weekly") return messages.accountCreditsPeriodWeekly;
@@ -25454,17 +25733,82 @@ ${error51.stderrTail}`] : []
   function resetCreditDetailLine(index, expiresAt, messages, now = /* @__PURE__ */ new Date()) {
     return messages.accountResetCreditsCardExpiry.replace("{index}", String(index)).replace("{time}", formatAccountCreditsReset(expiresAt, messages.locale, now));
   }
-  function renderAccountUsage(document2, state, messages, display, onRetry) {
-    if (!state) return null;
-    const usage = document2.createElement("div");
-    usage.className = "settings-account-usage";
-    if (state.status !== "ready") {
+  function accountUsageColumnLabel(period, display, messages) {
+    const mode = display === "remaining" ? messages.accountCreditsRemaining : messages.accountCreditsUsed;
+    return `${creditsPeriodLabel2(period, messages)}${messages.locale === "zh-CN" ? "" : " "}${mode}`;
+  }
+  function splitUsageWindows(credits, messages) {
+    const columns = {};
+    const additional = [];
+    if (credits.usedPercent !== void 0) {
+      const primary = {
+        label: credits.label ?? creditsPeriodLabel2(credits.periodType, messages),
+        usedPercent: credits.usedPercent,
+        resetsAt: credits.resetsAt
+      };
+      if (!credits.label && credits.periodType === "five_hour") columns.five_hour = primary;
+      else if (!credits.label && ["seven_day", "weekly"].includes(credits.periodType))
+        columns.seven_day = { ...primary, label: messages.accountCreditsPeriodSevenDay };
+      else additional.push(primary);
+    }
+    for (const product of credits.productUsage ?? []) {
+      const window2 = {
+        label: creditsProductLabel(product.product, messages),
+        usedPercent: product.usagePercent,
+        resetsAt: product.resetsAt
+      };
+      const period = product.product === "7-day window" ? "seven_day" : product.product === "5-hour window" ? "five_hour" : null;
+      if (period && !columns[period])
+        columns[period] = { ...window2, label: creditsPeriodLabel2(period, messages) };
+      else additional.push(window2);
+    }
+    return { columns, additional };
+  }
+  function renderUsageWindow(document2, window2, messages, display) {
+    const meter = document2.createElement("div");
+    meter.className = "settings-account-usage__meter";
+    const label = document2.createElement("span");
+    label.className = "settings-account-usage__title";
+    label.textContent = window2.label;
+    label.title = window2.label;
+    const value = display === "remaining" ? 100 - window2.usedPercent : window2.usedPercent;
+    const valueLabel = display === "remaining" ? messages.accountCreditsRemaining : messages.accountCreditsUsed;
+    const tone = rendererCreditsTone(window2.usedPercent);
+    const percent = document2.createElement("div");
+    percent.className = `settings-account-usage__percent settings-account-usage__percent--${tone}`;
+    const number4 = document2.createElement("span");
+    number4.textContent = formatRendererCreditsPercent(value);
+    const reset = window2.resetsAt ? renderAccountResetTime(document2, window2.resetsAt, messages) : null;
+    if (reset) percent.append(reset.countdown);
+    percent.append(number4);
+    const bar = document2.createElement("div");
+    bar.className = `settings-account-usage__bar settings-account-usage__bar--${tone}`;
+    bar.setAttribute("role", "meter");
+    bar.setAttribute("aria-label", `${window2.label} \xB7 ${valueLabel}`);
+    bar.setAttribute("aria-valuemin", "0");
+    bar.setAttribute("aria-valuemax", "100");
+    bar.setAttribute("aria-valuenow", String(value));
+    const fill = document2.createElement("span");
+    fill.style.width = `${Math.min(100, Math.max(0, value))}%`;
+    bar.append(fill);
+    meter.append(label, percent, bar);
+    if (reset) meter.append(reset.timestamp);
+    return meter;
+  }
+  function renderAccountUsage(document2, state, messages, display, onRetry, usageColumns = 2) {
+    if (state?.status !== "ready") {
+      const cell = document2.createElement("td");
+      cell.colSpan = usageColumns;
+      cell.className = "settings-account-usage-cell settings-account-usage-cell--message";
+      const usage = document2.createElement("div");
+      usage.className = "settings-account-usage";
       const message = document2.createElement("span");
       message.className = "settings-account-usage__message";
-      message.textContent = state.status === "loading" ? messages.accountCreditsLoading : state.status === "error" ? messages.accountCreditsFailed : messages.accountCreditsEmpty;
+      message.textContent = !state ? "\u2014" : state.status === "loading" ? messages.accountCreditsLoading : state.status === "error" ? messages.accountCreditsFailed : messages.accountCreditsEmpty;
+      if (!state) message.title = messages.accountCreditsEmpty;
       usage.append(message);
-      if (state.status === "loading") usage.setAttribute("aria-busy", "true");
-      if (state.status === "error") {
+      if (state?.status === "loading") usage.setAttribute("aria-busy", "true");
+      if (state?.status === "error") {
         const retry = document2.createElement("button");
         retry.type = "button";
         retry.className = "settings-command-button settings-command-button--secondary";
@@ -25472,10 +25816,16 @@ ${error51.stderrTail}`] : []
         retry.addEventListener("click", onRetry);
         usage.append(retry);
       }
-      return usage;
+      cell.append(usage);
+      return { cells: [cell], additional: null };
     }
     const credits = state.credits;
-    if (credits.remaining !== void 0 && credits.unit) {
+    if (credits.remaining !== void 0 && credits.unit && credits.usedPercent === void 0) {
+      const cell = document2.createElement("td");
+      cell.colSpan = usageColumns;
+      cell.className = "settings-account-usage-cell";
+      const usage = document2.createElement("div");
+      usage.className = "settings-account-usage";
       const meter = document2.createElement("div");
       meter.className = "settings-account-usage__meter settings-account-usage__meter--balance";
       const amount = formatAccountCreditsBalance(credits.remaining, credits.unit);
@@ -25490,59 +25840,35 @@ ${error51.stderrTail}`] : []
       value.title = `${amount} ${messages.accountCreditsRemaining}`;
       meter.append(value);
       usage.append(meter);
-      if (credits.usedPercent === void 0) return usage;
-    }
-    if (credits.usedPercent === void 0) return usage;
-    const windows = [
-      {
-        label: credits.label ?? creditsPeriodLabel2(credits.periodType, messages),
-        usedPercent: credits.usedPercent,
-        resetsAt: credits.resetsAt
-      },
-      ...(credits.productUsage ?? []).map((product) => ({
-        label: creditsProductLabel(product.product, messages),
-        usedPercent: product.usagePercent,
-        resetsAt: product.resetsAt
-      }))
-    ];
-    for (const window2 of windows) {
-      const meter = document2.createElement("div");
-      meter.className = "settings-account-usage__meter";
-      const label = document2.createElement("span");
-      label.className = "settings-account-usage__title";
-      label.textContent = window2.label;
-      label.title = window2.label;
-      const value = display === "remaining" ? 100 - window2.usedPercent : window2.usedPercent;
-      const valueLabel = display === "remaining" ? messages.accountCreditsRemaining : messages.accountCreditsUsed;
-      const tone = rendererCreditsTone(window2.usedPercent);
-      const bar = document2.createElement("div");
-      bar.className = `settings-account-usage__bar settings-account-usage__bar--${tone}`;
-      bar.setAttribute("role", "meter");
-      bar.setAttribute("aria-label", `${window2.label} \xB7 ${valueLabel}`);
-      bar.setAttribute("aria-valuemin", "0");
-      bar.setAttribute("aria-valuemax", "100");
-      bar.setAttribute("aria-valuenow", String(value));
-      const fill = document2.createElement("span");
-      fill.style.width = `${Math.min(100, Math.max(0, value))}%`;
-      bar.append(fill);
-      const percent = document2.createElement("span");
-      percent.className = `settings-account-usage__percent settings-account-usage__percent--${tone}`;
-      const prefix = document2.createElement("span");
-      prefix.textContent = valueLabel;
-      prefix.className = "settings-account-usage__value-label";
-      const number4 = document2.createElement("span");
-      number4.textContent = formatRendererCreditsPercent(value);
-      percent.append(prefix, number4);
-      meter.append(label, bar, percent);
-      if (window2.resetsAt) {
-        const reset = document2.createElement("span");
-        reset.className = "settings-account-usage__sub";
-        reset.textContent = `${formatAccountCreditsReset(window2.resetsAt, messages.locale)} ${messages.accountCreditsReset}`;
-        meter.append(reset);
-      }
-      usage.append(meter);
-    }
-    return usage;
+      cell.append(usage);
+      return { cells: [cell], additional: null };
+    }
+    const { columns, additional } = splitUsageWindows(credits, messages);
+    const cells = ["five_hour", "seven_day"].map((period) => {
+      const cell = document2.createElement("td");
+      cell.className = "settings-account-usage-cell";
+      const window2 = columns[period];
+      if (window2) cell.append(renderUsageWindow(document2, window2, messages, display));
+      else {
+        const missing = document2.createElement("div");
+        missing.className = "settings-account-usage__missing";
+        const label = document2.createElement("span");
+        label.className = "settings-account-usage__title";
+        label.textContent = creditsPeriodLabel2(period, messages);
+        const dash = document2.createElement("span");
+        dash.textContent = "\u2014";
+        dash.setAttribute("aria-hidden", "true");
+        missing.append(label, dash);
+        cell.append(missing);
+      }
+      return cell;
+    });
+    if (!additional.length) return { cells, additional: null };
+    const extra = document2.createElement("div");
+    extra.className = "settings-account-extra-usage";
+    for (const window2 of additional)
+      extra.append(renderUsageWindow(document2, window2, messages, display));
+    return { cells, additional: extra };
   }
   function renderAccountResetCredits(document2, credits, messages, options) {
     const resetCredits = credits.resetCredits;
@@ -25554,8 +25880,11 @@ ${error51.stderrTail}`] : []
     summary.title = messages.accountResetCreditsDetails;
     const count = document2.createElement("span");
     count.textContent = messages.locale === "zh-CN" ? `${resetCredits.availableCount} \u5F20` : String(resetCredits.availableCount);
+    const label = document2.createElement("span");
+    label.textContent = messages.accountResetCredits;
     summary.append(
       createRendererSettingsIcon("ticket", 16),
+      label,
       count,
       createRendererSettingsIcon("chevron-right", 14)
     );
@@ -25625,6 +25954,8 @@ ${error51.stderrTail}`] : []
     return () => {
       const target = key ? list.querySelector(`[data-account-focus="${CSS.escape(key)}"]`) : null;
       if (target && !target.matches(":disabled")) {
+        const dialog = target.closest("dialog");
+        if (dialog && !dialog.open) dialog.showModal();
         target.focus({ preventScroll: true });
         return;
       }
@@ -25634,97 +25965,139 @@ ${error51.stderrTail}`] : []
       (row ?? fallback).focus({ preventScroll: true });
     };
   }
-  function createAccountsTable(document2, messages) {
+  function createAccountsTable(document2, messages, kind) {
     const table = document2.createElement("table");
-    table.className = "settings-account-table";
-    table.setAttribute("aria-label", messages.pageLabels.accounts);
+    table.className = `settings-account-table settings-account-table--${kind}`;
+    table.setAttribute(
+      "aria-label",
+      kind === "api" ? messages.accountSectionApi : messages.accountSectionChat
+    );
     const head = document2.createElement("thead");
     const row = document2.createElement("tr");
-    for (const label of [
-      messages.accountColumnAccount,
-      messages.accountColumnUsage,
-      messages.accountResetCredits,
-      messages.accountColumnActions
-    ]) {
+    const columnCount = kind === "api" ? 3 : 4;
+    const headers = Array.from({ length: columnCount }, () => {
       const cell = document2.createElement("th");
       cell.scope = "col";
-      cell.textContent = label;
       row.append(cell);
-    }
+      return cell;
+    });
+    const updateDisplay = (display) => {
+      const labels = kind === "api" ? [
+        messages.accountColumnAccount,
+        messages.accountCreditsRemaining,
+        messages.accountColumnActions
+      ] : [
+        messages.accountColumnAccount,
+        accountUsageColumnLabel("five_hour", display, messages),
+        accountUsageColumnLabel("seven_day", display, messages),
+        messages.accountColumnActions
+      ];
+      headers.forEach((cell, index) => {
+        cell.textContent = labels[index] ?? "";
+      });
+    };
+    updateDisplay("remaining");
     head.append(row);
     const body = document2.createElement("tbody");
     table.append(head, body);
-    return { table, body };
+    return { table, body, updateDisplay };
+  }
+  function createAccountsGroup(document2, messages, kind) {
+    const root = document2.createElement("section");
+    root.className = "settings-account-group";
+    root.dataset.accountGroup = kind;
+    const title = document2.createElement("h2");
+    title.className = "settings-account-group__title";
+    title.textContent = kind === "api" ? messages.accountSectionApi : messages.accountSectionChat;
+    const list = document2.createElement("div");
+    list.className = "settings-account-list";
+    const { table, body, updateDisplay } = createAccountsTable(document2, messages, kind);
+    list.append(table);
+    root.append(title, list);
+    return { root, body, updateDisplay };
   }
-  function renderAccountRows(document2, account, messages, input) {
-    const row = document2.createElement("tr");
-    row.className = "settings-account-row";
-    row.dataset.accountId = account.accountId;
-    row.dataset.accountFocus = `${account.accountId}:row`;
-    row.tabIndex = -1;
-    const name = codexAccountDisplayName(account);
-    const authKind = codexAccountAuthKind(account);
-    const authLabel = formatCodexAccountAuthLabel(account, messages);
-    const titleText = authKind === "api" ? authLabel : name.local;
-    const accessibleName = authKind === "api" ? authLabel : name.full;
-    row.setAttribute("aria-label", accessibleName);
-    const personCell = document2.createElement("td");
+  function createAccountPerson(document2, messages, input) {
     const person = document2.createElement("div");
     person.className = "settings-account-row__person";
-    const mark = document2.createElement("div");
-    mark.className = "settings-account-row__mark";
-    mark.setAttribute("aria-hidden", "true");
-    mark.append(createRendererSettingsIcon("terminal", 17));
     const identity = document2.createElement("div");
     identity.className = "settings-account-row__identity";
-    const title = document2.createElement("div");
-    title.className = "settings-account-title";
-    const local = document2.createElement("strong");
-    local.className = "settings-account-email";
-    local.textContent = titleText;
-    local.title = accessibleName;
-    title.append(local);
-    if (account.active) {
-      const badge = document2.createElement("span");
-      badge.className = "settings-account-active";
-      badge.textContent = messages.accountDefaultBadge;
-      title.append(badge);
-    }
-    identity.append(title);
+    const title = document2.createElement("strong");
+    title.className = "settings-account-email";
+    title.textContent = input.name;
+    title.title = input.name;
+    title.translate = false;
     const metadata = document2.createElement("div");
     metadata.className = "settings-account-metadata";
-    if (name.domain) {
-      const domain2 = document2.createElement("span");
-      domain2.className = "settings-account-domain";
-      domain2.textContent = `@${name.domain}`;
-      metadata.append(domain2);
-    }
-    const planLabel = accountPlanLabel(account.planType);
-    if (planLabel) {
-      if (name.domain) {
+    const agent = document2.createElement("span");
+    agent.textContent = input.agent;
+    agent.translate = false;
+    if (input.name !== input.agent) metadata.append(agent);
+    if (input.plan) {
+      if (metadata.childElementCount) {
         const separator = document2.createElement("span");
-        separator.className = "settings-account-plan-separator";
         separator.textContent = "\xB7";
         separator.setAttribute("aria-hidden", "true");
         metadata.append(separator);
       }
       const plan = document2.createElement("span");
-      plan.className = account.planType === "pro" || account.planType === "prolite" ? "settings-account-plan settings-account-plan--highlighted" : "settings-account-plan";
-      plan.textContent = planLabel;
+      plan.className = input.highlighted ? "settings-account-plan settings-account-plan--highlighted" : "settings-account-plan";
+      plan.textContent = input.plan;
+      plan.translate = false;
       metadata.append(plan);
     }
-    if (metadata.childElementCount > 0) identity.append(metadata);
-    person.append(mark, identity);
-    personCell.append(person);
-    const usageCell = document2.createElement("td");
-    const usage = renderAccountUsage(document2, input.usage, messages, input.display, input.onRetry);
-    if (usage) usageCell.append(usage);
-    const resetCell = document2.createElement("td");
-    const resetLabel2 = document2.createElement("span");
-    resetLabel2.className = "settings-account-mobile-label";
-    resetLabel2.textContent = messages.accountResetCredits;
-    resetCell.append(resetLabel2);
+    if (input.active) {
+      const badge = document2.createElement("span");
+      badge.className = "settings-account-active";
+      badge.textContent = messages.accountDefaultBadge;
+      badge.title = messages.accountDefaultHint;
+      metadata.append(badge);
+    }
+    identity.append(title);
+    if (metadata.childElementCount) identity.append(metadata);
+    person.append(input.mark, identity);
+    return person;
+  }
+  function renderAccountRows(document2, account, messages, input) {
+    const row = document2.createElement("tr");
+    row.className = "settings-account-row";
+    row.dataset.accountId = account.accountId;
+    row.dataset.accountFocus = `${account.accountId}:row`;
+    row.tabIndex = -1;
+    const name = codexAccountDisplayName(account);
+    const authKind = codexAccountAuthKind(account);
+    const authLabel = formatCodexAccountAuthLabel(account, messages);
+    const titleName = authKind === "api" ? authLabel : name.full;
+    row.setAttribute("aria-label", titleName);
+    const personCell = document2.createElement("td");
+    personCell.className = "settings-account-person-cell";
+    const mark = document2.createElement("div");
+    mark.className = "settings-account-row__mark";
+    mark.setAttribute("aria-hidden", "true");
+    mark.append(createRendererSettingsIcon("terminal", 17));
+    personCell.append(
+      createAccountPerson(document2, messages, {
+        name: titleName,
+        agent: "Codex",
+        plan: accountPlanLabel(account.planType),
+        highlighted: account.planType === "pro" || account.planType === "prolite",
+        active: account.active,
+        mark
+      })
+    );
+    const usageColumns = authKind === "api" ? 1 : 2;
+    const usage = renderAccountUsage(
+      document2,
+      input.usage,
+      messages,
+      input.display,
+      input.onRetry,
+      usageColumns
+    );
+    if (usage.additional) personCell.append(usage.additional);
     const actionsCell = document2.createElement("td");
+    actionsCell.className = "settings-account-management-cell";
+    const management = document2.createElement("div");
+    management.className = "settings-account-management";
     const actions = document2.createElement("div");
     actions.className = "settings-account-actions";
     if (!account.active) {
@@ -25732,6 +26105,7 @@ ${error51.stderrTail}`] : []
       activate.type = "button";
       activate.className = "settings-account-action";
       activate.textContent = messages.accountUse;
+      activate.title = messages.accountDefaultHint;
       activate.dataset.accountFocus = `${account.accountId}:activate`;
       activate.disabled = input.actionsDisabled;
       activate.addEventListener("click", input.onActivate);
@@ -25747,36 +26121,51 @@ ${error51.stderrTail}`] : []
       signIn.addEventListener("click", input.onSignIn);
       actions.append(signIn);
     }
+    const more = [];
+    if (account.email && input.usage) {
+      const refresh = document2.createElement("button");
+      refresh.type = "button";
+      refresh.className = "settings-account-action";
+      refresh.textContent = messages.accountCreditsRefresh;
+      refresh.dataset.accountFocus = `${account.accountId}:refresh`;
+      refresh.disabled = input.actionsDisabled || input.usage.status === "loading";
+      refresh.addEventListener("click", input.onRetry);
+      more.push(refresh);
+    }
     if (!account.isDefault) {
       const remove = document2.createElement("button");
       remove.type = "button";
-      remove.className = "settings-icon-button settings-account-delete";
-      remove.title = messages.accountDelete;
+      remove.className = "settings-account-action settings-account-delete";
+      remove.textContent = messages.accountDelete;
       remove.dataset.accountFocus = `${account.accountId}:delete`;
-      remove.setAttribute("aria-label", `${messages.accountDelete}: ${accessibleName}`);
+      remove.setAttribute("aria-label", `${messages.accountDelete}: ${name.full}`);
       remove.disabled = input.actionsDisabled;
-      remove.append(createRendererSettingsIcon("trash", 16));
       remove.addEventListener("click", input.onDelete);
-      actions.append(remove);
-    }
-    actionsCell.append(actions);
-    row.append(personCell, usageCell, resetCell, actionsCell);
+      more.push(remove);
+    }
+    if (more.length)
+      actions.append(
+        createAccountDetails(document2, messages, {
+          label: messages.accountMore,
+          triggerLabel: `${name.full} \xB7 ${messages.accountMore}`,
+          description: name.full,
+          focusKey: `${account.accountId}:more`,
+          icon: "ellipsis",
+          disabled: input.actionsDisabled,
+          actions: more
+        })
+      );
+    management.append(actions);
+    actionsCell.append(management);
+    row.append(personCell, ...usage.cells, actionsCell);
     const reset = input.usage?.status === "ready" ? renderAccountResetCredits(document2, input.usage.credits, messages, input) : null;
-    if (!reset) {
-      const unknown2 = document2.createElement("span");
-      unknown2.className = "settings-account-unknown";
-      unknown2.textContent = "\u2014";
-      unknown2.title = messages.accountResetCreditsUnknown;
-      unknown2.setAttribute("aria-label", messages.accountResetCreditsUnknown);
-      resetCell.append(unknown2);
-      return [row];
-    }
+    if (!reset) return [row];
     const detailsRow = document2.createElement("tr");
     detailsRow.className = "settings-account-details-row";
     detailsRow.id = `settings-account-reset-${++resetDetailsSequence}`;
     detailsRow.hidden = !input.resetExpanded;
     const detailsCell = document2.createElement("td");
-    detailsCell.colSpan = 4;
+    detailsCell.colSpan = authKind === "api" ? 3 : 4;
     detailsCell.append(reset.details);
     detailsRow.append(detailsCell);
     reset.summary.dataset.accountFocus = `${account.accountId}:reset`;
@@ -25787,120 +26176,84 @@ ${error51.stderrTail}`] : []
       reset.summary.setAttribute("aria-expanded", String(!detailsRow.hidden));
       input.onResetExpanded(!detailsRow.hidden);
     });
-    resetCell.append(reset.summary);
+    management.append(reset.summary);
     return [row, detailsRow];
   }
+  function renderHarnessAccountRow(document2, account, messages, display) {
+    const row = document2.createElement("tr");
+    row.className = "settings-account-row";
+    row.dataset.harnessId = account.harnessId;
+    row.tabIndex = -1;
+    const name = account.email ?? account.label ?? account.harnessName;
+    row.setAttribute("aria-label", name);
+    const personCell = document2.createElement("td");
+    personCell.className = "settings-account-person-cell";
+    const logo = document2.createElement("div");
+    logo.className = "settings-harness-account__logo";
+    logo.setAttribute("aria-hidden", "true");
+    const agent = KNOWN_RENDERER_AGENTS.find((agent2) => agent2 === account.harnessId);
+    if (agent) logo.append(createRendererAgentIcon(agent, 26, document2));
+    personCell.append(
+      createAccountPerson(document2, messages, {
+        name,
+        agent: account.harnessName,
+        plan: account.plan ?? null,
+        mark: logo
+      })
+    );
+    const usage = renderAccountUsage(
+      document2,
+      { status: "ready", credits: account.credits },
+      messages,
+      display,
+      () => void 0
+    );
+    if (usage.additional) personCell.append(usage.additional);
+    const managementCell = document2.createElement("td");
+    managementCell.className = "settings-account-management-cell";
+    const management = document2.createElement("div");
+    management.className = "settings-account-native";
+    const label = document2.createElement("span");
+    label.textContent = messages.accountNativeManaged;
+    const info = createAccountDetails(document2, messages, {
+      label: `${account.harnessName} \xB7 ${messages.accountNativeManaged}`,
+      description: messages.accountNativeManagementHint.replace("{harness}", account.harnessName),
+      focusKey: `harness:${account.harnessId}:info`,
+      icon: "info",
+      actions: []
+    });
+    management.append(label, info);
+    managementCell.append(management);
+    row.append(personCell, ...usage.cells, managementCell);
+    return row;
+  }
 
   // src/settings/harness-accounts.ts
-  function mountHarnessAccounts(context, messages, getClient, onChange) {
-    const document2 = context.content.ownerDocument;
-    const section = document2.createElement("section");
-    section.className = "settings-harness-accounts";
-    section.hidden = true;
-    const heading = document2.createElement("h2");
-    heading.className = "settings-harness-accounts__title";
-    heading.textContent = messages.harnessAccountsTitle;
-    const list = document2.createElement("div");
-    list.className = "settings-account-list";
-    section.append(heading, list);
-    context.content.append(section);
+  function createHarnessAccounts(signal, getClient, onChange) {
     let accounts = [];
     let refreshing = false;
-    let query = "";
-    let display = "remaining";
-    const render = () => {
-      section.hidden = accounts.length === 0;
-      list.replaceChildren();
-      const visible = accounts.filter(
-        (account) => `${account.harnessName} ${account.email ?? ""} ${account.label ?? ""} ${account.plan ?? ""}`.toLocaleLowerCase().includes(query)
-      );
-      for (const account of visible) {
-        const row = document2.createElement("article");
-        row.className = "settings-harness-account";
-        row.dataset.harnessId = account.harnessId;
-        const identity = document2.createElement("div");
-        identity.className = "settings-harness-account__identity";
-        const name = document2.createElement("strong");
-        name.className = "settings-account-email";
-        const accountName = account.email ?? account.label;
-        name.textContent = accountName ?? account.harnessName;
-        name.title = name.textContent;
-        identity.append(name);
-        const metadata = document2.createElement("div");
-        metadata.className = "settings-account-metadata";
-        if (accountName) {
-          const harness = document2.createElement("span");
-          harness.textContent = account.harnessName;
-          metadata.append(harness);
-        }
-        if (account.plan) {
-          if (accountName) {
-            const separator = document2.createElement("span");
-            separator.textContent = "\xB7";
-            separator.setAttribute("aria-hidden", "true");
-            metadata.append(separator);
-          }
-          const plan = document2.createElement("span");
-          plan.className = "settings-account-plan";
-          plan.textContent = account.plan;
-          metadata.append(plan);
-        }
-        if (metadata.childElementCount) identity.append(metadata);
-        const usage = renderAccountUsage(
-          document2,
-          { status: "ready", credits: account.credits },
-          messages,
-          display,
-          () => void 0
-        );
-        const person = document2.createElement("div");
-        person.className = "settings-account-row__person";
-        const agent = KNOWN_RENDERER_AGENTS.find((agent2) => agent2 === account.harnessId);
-        if (agent) {
-          const logo = document2.createElement("div");
-          logo.className = "settings-harness-account__logo";
-          logo.setAttribute("aria-hidden", "true");
-          logo.append(createRendererAgentIcon(agent, 28, document2));
-          person.append(logo);
-        }
-        person.append(identity);
-        row.append(person);
-        if (usage) row.append(usage);
-        list.append(row);
-      }
-      if (accounts.length && !visible.length) {
-        const empty = document2.createElement("p");
-        empty.className = "settings-account-empty";
-        empty.textContent = messages.accountNoMatches;
-        list.append(empty);
-      }
-    };
     return {
+      get accounts() {
+        return accounts;
+      },
       get refreshing() {
         return refreshing;
       },
-      update(nextQuery, nextDisplay) {
-        query = nextQuery;
-        display = nextDisplay;
-        render();
-      },
       async refresh() {
-        if (refreshing || context.signal.aborted) return;
+        if (refreshing || signal.aborted) return;
         const client = getClient();
         if (!client?.listHarnessAccounts) return;
         refreshing = true;
         onChange();
         try {
           const result = await client.listHarnessAccounts();
-          if (!context.signal.aborted) accounts = result.accounts;
+          if (!signal.aborted)
+            accounts = [...result.accounts].sort((a, b) => a.harnessId.localeCompare(b.harnessId));
         } catch {
-          if (!context.signal.aborted) accounts = [];
+          if (!signal.aborted) accounts = [];
         } finally {
           refreshing = false;
-          if (!context.signal.aborted) {
-            render();
-            onChange();
-          }
+          if (!signal.aborted) onChange();
         }
       }
     };
@@ -25938,29 +26291,6 @@ ${error51.stderrTail}`] : []
         const status = document2.createElement("p");
         status.className = "settings-account-status";
         status.setAttribute("aria-live", "polite");
-        const helpRow = document2.createElement("div");
-        helpRow.className = "settings-account-help-row";
-        const taskHint = document2.createElement("p");
-        taskHint.className = "settings-account-task-hint";
-        const taskHintText = document2.createElement("span");
-        taskHintText.textContent = messages.accountTaskHint;
-        taskHint.append(createRendererSettingsIcon("info", 16), taskHintText);
-        const help = document2.createElement("button");
-        help.type = "button";
-        help.className = "settings-account-help-button";
-        help.append(createRendererSettingsIcon("help", 16), messages.accountLoginHelp);
-        help.setAttribute("aria-expanded", "false");
-        help.setAttribute("aria-controls", "settings-account-login-help");
-        const deviceCodeNote = document2.createElement("p");
-        deviceCodeNote.id = "settings-account-login-help";
-        deviceCodeNote.className = "settings-account-device-code-note";
-        deviceCodeNote.textContent = messages.accountDeviceCodePrerequisite;
-        deviceCodeNote.hidden = true;
-        help.addEventListener("click", () => {
-          deviceCodeNote.hidden = !deviceCodeNote.hidden;
-          help.setAttribute("aria-expanded", String(!deviceCodeNote.hidden));
-        });
-        helpRow.append(taskHint, help);
         const toolbar = document2.createElement("div");
         toolbar.className = "settings-account-toolbar";
         const connected = document2.createElement("div");
@@ -26006,11 +26336,12 @@ ${error51.stderrTail}`] : []
         });
         search.addEventListener("input", () => render());
         toolbar.append(connected, searchWrapper, displayControls, refreshUsage);
-        const list = document2.createElement("div");
-        list.className = "settings-account-list";
-        const { table, body } = createAccountsTable(document2, messages);
-        list.append(table);
-        context.content.append(header, helpRow, deviceCodeNote, status, toolbar, list);
+        const groups = document2.createElement("div");
+        groups.className = "settings-account-groups";
+        const apiGroup = createAccountsGroup(document2, messages, "api");
+        const chatGroup = createAccountsGroup(document2, messages, "chatgpt");
+        context.content.append(header, status, toolbar, groups);
+        const stopCountdowns = mountAccountResetCountdowns(groups, messages, context.signal);
         let accounts = [];
         let accountCreating = false;
         let accountActivating = false;
@@ -26056,104 +26387,130 @@ ${error51.stderrTail}`] : []
             );
           }, 750);
         };
+        const appendCodexAccount = (body, account) => {
+          body.append(
+            ...renderAccountRows(document2, account, messages, {
+              usage: usageByAccountId.get(account.accountId),
+              display: usageDisplay,
+              actionsDisabled: accountBusy(),
+              usingReset: usingResetAccountId === account.accountId,
+              resetDisabled: accountBusy(),
+              resetExpanded: expandedResetAccounts.has(account.accountId),
+              onActivate: () => mutate(() => client().activateCodexAccount({ accountId: account.accountId })),
+              onSignIn: () => startLogin(account.accountId),
+              onDelete: () => deleteAccount(account.accountId),
+              onRetry: () => {
+                usageByAccountId.delete(account.accountId);
+                loadUsage(accounts);
+              },
+              onResetExpanded: (open) => {
+                if (open) expandedResetAccounts.add(account.accountId);
+                else expandedResetAccounts.delete(account.accountId);
+              },
+              ...getClient()?.consumeCodexAccountResetCredit ? { onUseReset: () => useReset(account.accountId) } : {}
+            })
+          );
+          if (login?.accountId !== account.accountId) return;
+          const verification = document2.createElement("div");
+          verification.className = "settings-account-verification";
+          const prompt = document2.createElement("span");
+          prompt.textContent = messages.accountVerificationDescription;
+          const link = document2.createElement("a");
+          link.href = login.verificationUrl;
+          link.target = "_blank";
+          link.rel = "noopener noreferrer";
+          link.textContent = login.verificationUrl;
+          link.addEventListener("click", (event) => {
+            const bridge = document2.defaultView?.electronBridge;
+            if (typeof bridge?.sendMessageFromView !== "function") return;
+            event.preventDefault();
+            void Promise.resolve(
+              bridge.sendMessageFromView({
+                type: "open-in-browser",
+                url: login?.verificationUrl ?? link.href,
+                initiator: "open_in_browser_bridge",
+                openTarget: "external-browser",
+                source: "manual"
+              })
+            ).catch(() => void 0);
+          });
+          const code = document2.createElement("code");
+          code.textContent = login.userCode;
+          const copyCode = document2.createElement("button");
+          copyCode.type = "button";
+          copyCode.className = "settings-command-button settings-command-button--secondary";
+          copyCode.textContent = messages.accountCopyCode;
+          copyCode.addEventListener("click", () => {
+            void document2.defaultView?.navigator.clipboard?.writeText(login?.userCode ?? "").then(() => {
+              copyCode.textContent = messages.accountCopied;
+            });
+          });
+          const cancel = document2.createElement("button");
+          cancel.type = "button";
+          cancel.className = "settings-command-button settings-command-button--secondary";
+          cancel.textContent = messages.accountLoginCancel;
+          cancel.addEventListener(
+            "click",
+            () => cancelLogin(login?.accountId ?? "", login?.loginId ?? "")
+          );
+          verification.append(prompt, link, code, copyCode, cancel);
+          const verificationRow = document2.createElement("tr");
+          const verificationCell = document2.createElement("td");
+          verificationCell.colSpan = codexAccountAuthKind(account) === "api" ? 3 : 4;
+          verificationCell.append(verification);
+          verificationRow.append(verificationCell);
+          body.append(verificationRow);
+        };
         const render = () => {
-          const restoreFocus = accountListFocusRestorer(list, search);
-          body.replaceChildren();
+          const restoreFocus = accountListFocusRestorer(groups, search);
+          apiGroup.body.replaceChildren();
+          chatGroup.body.replaceChildren();
           status.textContent = loginMessage ?? "";
-          connectedCount.textContent = String(accounts.filter((account) => account.email).length);
+          connectedCount.textContent = String(accounts.length + harnessAccounts.accounts.length);
+          apiGroup.updateDisplay(usageDisplay);
+          chatGroup.updateDisplay(usageDisplay);
           search.disabled = login !== null || loginStartingAccountId !== null;
           for (const [display, button] of displayButtons) {
             button.setAttribute("aria-pressed", String(display === usageDisplay));
           }
           refreshUsage.disabled = (!getClient()?.inspectCodexAccountUsage || !accounts.some((account) => accountHasUsage(account))) && !getClient()?.listHarnessAccounts || harnessAccounts?.refreshing === true || [...usageByAccountId.values()].some((usage) => usage.status === "loading") || accountBusy();
           const query = search.value.trim().toLocaleLowerCase();
-          harnessAccounts?.update(query, usageDisplay);
           const visibleAccounts = accounts.filter(
-            (account) => `${account.email ?? ""} ${account.label} ${account.authIdentity ?? ""} ${account.authKind ?? ""}`.toLocaleLowerCase().includes(query)
+            (account) => `Codex ${account.email ?? ""} ${account.label} ${account.authIdentity ?? ""} ${account.authKind ?? ""} ${accountPlanLabel(account.planType) ?? ""}`.toLocaleLowerCase().includes(query)
           );
-          if (visibleAccounts.length === 0) {
-            const emptyRow = document2.createElement("tr");
-            const emptyCell = document2.createElement("td");
-            emptyCell.colSpan = 4;
-            emptyCell.className = "settings-account-empty";
-            emptyCell.textContent = query ? messages.accountNoMatches : messages.accountEmpty;
-            emptyRow.append(emptyCell);
-            body.append(emptyRow);
-          }
+          const visibleApi = visibleAccounts.filter(
+            (account) => codexAccountAuthKind(account) === "api"
+          );
+          const visibleChat = visibleAccounts.filter(
+            (account) => codexAccountAuthKind(account) !== "api"
+          );
+          const visibleHarnessAccounts = harnessAccounts.accounts.filter(
+            (account) => `${account.harnessName} ${account.email ?? ""} ${account.label ?? ""} ${account.plan ?? ""}`.toLocaleLowerCase().includes(query)
+          );
+          displayControls.hidden = !accounts.some((account) => codexAccountAuthKind(account) !== "api") && harnessAccounts.accounts.length === 0;
           add.disabled = accountBusy();
-          for (const account of visibleAccounts) {
-            body.append(
-              ...renderAccountRows(document2, account, messages, {
-                usage: usageByAccountId.get(account.accountId),
-                display: usageDisplay,
-                actionsDisabled: accountBusy(),
-                usingReset: usingResetAccountId === account.accountId,
-                resetDisabled: accountBusy(),
-                resetExpanded: expandedResetAccounts.has(account.accountId),
-                onActivate: () => mutate(() => client().activateCodexAccount({ accountId: account.accountId })),
-                onSignIn: () => startLogin(account.accountId),
-                onDelete: () => deleteAccount(account.accountId),
-                onRetry: () => {
-                  usageByAccountId.delete(account.accountId);
-                  loadUsage(accounts);
-                },
-                onResetExpanded: (open) => {
-                  if (open) expandedResetAccounts.add(account.accountId);
-                  else expandedResetAccounts.delete(account.accountId);
-                },
-                ...getClient()?.consumeCodexAccountResetCredit ? { onUseReset: () => useReset(account.accountId) } : {}
-              })
-            );
-            if (login?.accountId === account.accountId) {
-              const verification = document2.createElement("div");
-              verification.className = "settings-account-verification";
-              const prompt = document2.createElement("span");
-              prompt.textContent = messages.accountVerificationDescription;
-              const link = document2.createElement("a");
-              link.href = login.verificationUrl;
-              link.target = "_blank";
-              link.rel = "noopener noreferrer";
-              link.textContent = login.verificationUrl;
-              link.addEventListener("click", (event) => {
-                const bridge = document2.defaultView?.electronBridge;
-                if (typeof bridge?.sendMessageFromView !== "function") return;
-                event.preventDefault();
-                void Promise.resolve(
-                  bridge.sendMessageFromView({
-                    type: "open-in-browser",
-                    url: login?.verificationUrl ?? link.href,
-                    initiator: "open_in_browser_bridge",
-                    openTarget: "external-browser",
-                    source: "manual"
-                  })
-                ).catch(() => void 0);
-              });
-              const code = document2.createElement("code");
-              code.textContent = login.userCode;
-              const copyCode = document2.createElement("button");
-              copyCode.type = "button";
-              copyCode.className = "settings-command-button settings-command-button--secondary";
-              copyCode.textContent = messages.accountCopyCode;
-              copyCode.addEventListener("click", () => {
-                void document2.defaultView?.navigator.clipboard?.writeText(login?.userCode ?? "").then(() => {
-                  copyCode.textContent = messages.accountCopied;
-                });
-              });
-              const cancel = document2.createElement("button");
-              cancel.type = "button";
-              cancel.className = "settings-command-button settings-command-button--secondary";
-              cancel.textContent = messages.accountLoginCancel;
-              cancel.addEventListener(
-                "click",
-                () => cancelLogin(login?.accountId ?? "", login?.loginId ?? "")
-              );
-              verification.append(prompt, link, code, copyCode, cancel);
-              const verificationRow = document2.createElement("tr");
-              const verificationCell = document2.createElement("td");
-              verificationCell.colSpan = 4;
-              verificationCell.append(verification);
-              verificationRow.append(verificationCell);
-              body.append(verificationRow);
+          groups.replaceChildren();
+          if (visibleApi.length + visibleChat.length + visibleHarnessAccounts.length === 0) {
+            const empty = document2.createElement("div");
+            empty.className = "settings-account-list";
+            const emptyMessage = document2.createElement("p");
+            emptyMessage.className = "settings-account-empty";
+            emptyMessage.textContent = query ? messages.accountNoMatches : messages.accountEmpty;
+            empty.append(emptyMessage);
+            groups.append(empty);
+          } else {
+            if (visibleApi.length) {
+              for (const account of visibleApi) appendCodexAccount(apiGroup.body, account);
+              groups.append(apiGroup.root);
+            }
+            if (visibleChat.length + visibleHarnessAccounts.length) {
+              for (const account of visibleChat) appendCodexAccount(chatGroup.body, account);
+              for (const account of visibleHarnessAccounts) {
+                chatGroup.body.append(
+                  renderHarnessAccountRow(document2, account, messages, usageDisplay)
+                );
+              }
+              groups.append(chatGroup.root);
             }
           }
           restoreFocus();
@@ -26386,10 +26743,11 @@ ${error51.stderrTail}`] : []
           });
         } catch {
         }
-        const harnessAccounts = mountHarnessAccounts(context, messages, getClient, render);
+        const harnessAccounts = createHarnessAccounts(context.signal, getClient, render);
         void harnessAccounts.refresh();
         load();
         return () => {
+          stopCountdowns();
           clearLoginRefresh();
           unsubscribe?.();
         };
@@ -26472,7 +26830,7 @@ ${error51.stderrTail}`] : []
     },
     {
       id: "general",
-      pageIds: ["plugins", "updates"]
+      pageIds: ["appearance", "plugins", "updates"]
     },
     {
       id: "other",
@@ -26968,6 +27326,7 @@ ${error51.stderrTail}`] : []
       createConnectionsSettingsPage(messages, getDiagnostics),
       createAccountsSettingsPage(messages, getAccountClient),
       createSessionImportSettingsPage(messages, getSessionImportClient, openImportedThread),
+      createAppearanceSettingsPage(messages),
       createPluginsSettingsPage(messages, getDiagnostics),
       updatesPage(messages, getUpdateClient),
       aboutPage(messages)
@@ -26987,10 +27346,10 @@ ${error51.stderrTail}`] : []
   }
 
   // src/settings/shell.css
-  var shell_default = ':host {\n  /* Inherit Codex Desktop color-scheme; light-dark() tracks the host page. */\n  --settings-bg: light-dark(#ffffff, #181818);\n  --settings-sidebar: light-dark(#f4f4f5, #1c1c1c);\n  --settings-panel: transparent;\n  --settings-text: light-dark(#171717, #f5f5f5);\n  --settings-muted: light-dark(#737373, #a1a1a1);\n  --settings-subtle: light-dark(#8a8a8a, #777777);\n  --settings-border: light-dark(rgb(15 23 42 / 10%), rgb(255 255 255 / 10%));\n  --settings-divider: light-dark(rgb(15 23 42 / 10%), rgb(255 255 255 / 10%));\n  --settings-hover: light-dark(rgb(15 23 42 / 5%), rgb(255 255 255 / 6%));\n  --settings-active: light-dark(rgb(51 156 255 / 14%), rgb(51 156 255 / 12%));\n  --settings-focus: #339cff;\n  --settings-elevated: light-dark(#ffffff, #2c2c2e);\n  --settings-inset: light-dark(rgb(15 23 42 / 4%), rgb(0 0 0 / 18%));\n  --settings-surface: light-dark(rgb(15 23 42 / 3%), rgb(255 255 255 / 2%));\n  --settings-surface-strong: light-dark(rgb(15 23 42 / 6%), rgb(255 255 255 / 6%));\n  --settings-surface-hover: light-dark(#eeeeee, #303030);\n  --settings-mark: light-dark(#52525b, #d4d8de);\n  --settings-dialog-shadow: light-dark(\n    0 24px 64px rgb(15 23 42 / 16%),\n    0 24px 64px rgb(0 0 0 / 38%)\n  );\n  --settings-backdrop: light-dark(rgb(15 23 42 / 28%), rgb(0 0 0 / 52%));\n  --settings-segmented-shadow:\n    0 0 0 0.5px light-dark(rgb(15 23 42 / 6%), rgb(0 0 0 / 4%)),\n    0 3px 1px 0 light-dark(rgb(15 23 42 / 4%), rgb(0 0 0 / 4%)),\n    0 3px 8px 0 light-dark(rgb(15 23 42 / 10%), rgb(0 0 0 / 12%));\n  --settings-primary: light-dark(#171717, #f4f4f4);\n  --settings-primary-hover: light-dark(#2f2f2f, #ffffff);\n  --settings-primary-text: light-dark(#ffffff, #171717);\n  --settings-warning: light-dark(#8a5500, #f5c96a);\n  --settings-warning-bg: light-dark(#fff8e6, rgb(245 201 106 / 8%));\n  --settings-warning-border: light-dark(#ead8a8, rgb(245 201 106 / 24%));\n  --settings-danger: light-dark(#b42318, #f87171);\n  --settings-danger-bg: light-dark(#fff1f0, rgb(239 68 68 / 8%));\n  --settings-danger-border: light-dark(#f3c7c3, rgb(239 68 68 / 22%));\n  --settings-success: light-dark(#16784a, #4ade80);\n  color: var(--settings-text);\n  color-scheme: inherit;\n  font:\n    13px/1.5 system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n  letter-spacing: 0;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  letter-spacing: 0;\n}\n\nbutton,\ninput,\nselect {\n  font: inherit;\n}\n\nbutton {\n  color: inherit;\n}\n\n[hidden] {\n  display: none !important;\n}\n\n.codexhost-settings-dialog {\n  width: min(1120px, calc(100vw - 32px));\n  height: min(780px, calc(100vh - 32px));\n  max-width: none;\n  max-height: none;\n  margin: auto;\n  padding: 0;\n  overflow: hidden;\n  color: var(--settings-text);\n  background: var(--settings-bg);\n  border: 1px solid var(--settings-border);\n  border-radius: 12px;\n  box-shadow: var(--settings-dialog-shadow);\n}\n\n.codexhost-settings-dialog::backdrop {\n  background: var(--settings-backdrop);\n}\n\n.settings-frame,\n.settings-layout {\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n}\n\n.settings-frame {\n  display: flex;\n  flex-direction: column;\n}\n\n.settings-layout {\n  flex: 1;\n  display: grid;\n  grid-template-columns: 184px minmax(0, 1fr);\n  background: var(--settings-bg);\n}\n\n.settings-sidebar {\n  display: flex;\n  min-width: 0;\n  min-height: 0;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--settings-sidebar);\n  border-right: 1px solid var(--settings-border);\n  padding-top: 14px;\n}\n\n.settings-header {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  height: 48px;\n  flex: none;\n  padding: 0 12px;\n  border-bottom: 1px solid var(--settings-border);\n}\n\n.settings-header-actions {\n  display: flex;\n  align-items: center;\n  flex: none;\n  gap: 12px;\n  margin-left: auto;\n}\n\n.settings-brand {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  gap: 7px;\n}\n\n.settings-brand__mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  flex: none;\n  color: var(--settings-text);\n}\n\n.settings-brand__mark .codexhost-settings-icon {\n  width: 24px;\n  height: 24px;\n  object-fit: contain;\n}\n\n.settings-brand__copy {\n  display: flex;\n  min-width: 0;\n  align-items: baseline;\n  gap: 0;\n  line-height: 20px;\n}\n\n.settings-brand__name {\n  overflow: hidden;\n  color: var(--settings-text);\n  font-size: 13px;\n  font-weight: 600;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.settings-brand__title {\n  margin-left: 8px;\n  padding-left: 8px;\n  color: var(--settings-muted);\n  font-size: 13px;\n  font-weight: 400;\n  border-left: 1px solid var(--settings-border);\n}\n\n.settings-nav {\n  display: flex;\n  min-width: 0;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 2px;\n  padding: 0 7px 10px;\n  overflow-y: auto;\n}\n\n.settings-nav-section-label {\n  min-height: 28px;\n  padding: 7px 9px 3px 4px;\n  color: var(--settings-muted);\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 18px;\n}\n\n.settings-nav-section-label:not(:first-child) {\n  margin-top: 8px;\n}\n\n.settings-nav-button {\n  display: grid;\n  grid-template-columns: 16px minmax(0, 1fr);\n  align-items: center;\n  width: 100%;\n  position: relative;\n  min-height: 34px;\n  flex: none;\n  gap: 9px;\n  padding: 6px 9px;\n  color: var(--settings-text);\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 21px;\n  text-align: left;\n  background: transparent;\n  border: 0;\n  border-radius: 8px;\n  cursor: pointer;\n}\n\n.settings-nav-button .codexhost-settings-icon {\n  width: 16px;\n  height: 16px;\n  opacity: 0.9;\n}\n\n.settings-nav-button:hover {\n  background: var(--settings-hover);\n}\n\n.settings-nav-button[aria-current="page"] {\n  background: var(--settings-active);\n  color: var(--settings-text);\n  font-weight: 500;\n}\n\n.settings-nav-button span {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.settings-icon-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  flex: none;\n  padding: 0;\n  color: var(--settings-muted);\n  background: transparent;\n  border: 0;\n  border-radius: 8px;\n  cursor: pointer;\n}\n\n.settings-icon-button:hover {\n  color: var(--settings-text);\n  background: var(--settings-hover);\n}\n\n.settings-icon-button:focus-visible,\n.settings-nav-button:focus-visible {\n  outline: 2px solid var(--settings-focus);\n  outline-offset: 1px;\n}\n\n.settings-page {\n  display: block;\n  position: relative;\n  min-width: 0;\n  min-height: 0;\n  overflow-y: auto;\n  background: var(--settings-bg);\n  scrollbar-gutter: stable;\n}\n\n.settings-page__content {\n  width: min(930px, calc(100% - 80px));\n  margin-inline: auto;\n}\n\n.settings-page__content {\n  min-width: 0;\n  padding: 28px 0 36px;\n}\n\n.settings-section-label {\n  min-height: auto;\n  padding: 0 0 28px;\n  color: var(--settings-text);\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 26px;\n}\n\n.settings-status-list,\n.settings-empty {\n  overflow: hidden;\n  background: var(--settings-panel);\n}\n\n.settings-status-row {\n  display: grid;\n  grid-template-columns: minmax(170px, 1fr) auto minmax(280px, 1.45fr);\n  position: relative;\n  align-items: center;\n  min-height: 72px;\n  gap: 20px;\n  padding: 12px 0;\n}\n\n.settings-status-row:not(:last-child)::after {\n  content: "";\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: 1px;\n  background: var(--settings-divider);\n}\n\n.settings-status-row__identity {\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  color: var(--settings-text);\n  gap: 10px;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 22px;\n}\n\n.settings-status-row__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  flex: none;\n  color: var(--settings-muted);\n  background: var(--settings-surface-strong);\n  border-radius: 50%;\n}\n\n.settings-status-badge {\n  flex: none;\n  padding: 3px 8px;\n  color: var(--settings-muted);\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 18px;\n  background: var(--settings-surface-strong);\n  border: 1px solid var(--settings-border);\n  border-radius: 6px;\n}\n\n.settings-status-row__detail {\n  min-width: 0;\n  color: var(--settings-muted);\n  font-size: 13px;\n  line-height: 20px;\n}\n\n.settings-page-description {\n  max-width: 760px;\n  margin: -10px 0 20px;\n  color: var(--settings-muted);\n  font-size: 12px;\n  line-height: 18px;\n}\n\n.settings-session-import-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 24px;\n}\n\n.settings-session-import-header .settings-section-label {\n  min-width: 0;\n}\n\n.settings-session-import-harness {\n  display: flex;\n  min-width: 0;\n  margin: 0 0 16px;\n}\n\n.settings-session-import-harness__options {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  width: fit-content;\n  max-width: 100%;\n  gap: 8px;\n}\n\n.settings-session-import-harness__option {\n  min-height: 32px;\n  flex: none;\n  padding: 6px 10px;\n  color: var(--settings-muted);\n  font: inherit;\n  font-size: 12px;\n  white-space: nowrap;\n  background: transparent;\n  border: 1px solid var(--settings-border);\n  border-radius: 6px;\n  cursor: pointer;\n}\n\n.settings-session-import-harness__option[aria-pressed="true"] {\n  color: var(--settings-text);\n  background: var(--settings-active);\n  border-color: rgb(51 156 255 / 50%);\n}\n\n.settings-session-import-harness__option:disabled {\n  opacity: 0.38;\n  cursor: not-allowed;\n}\n\n.settings-session-import-harness__option:focus-visible {\n  outline: 2px solid var(--settings-focus);\n  outline-offset: 2px;\n}\n\n.settings-session-import-search,\n.settings-session-import-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 10px;\n}\n\n.settings-session-import-search {\n  align-items: stretch;\n  margin: 16px 0 0;\n}\n\n.settings-session-import-pagination {\n  margin: 16px 0 0;\n}\n\n.settings-session-import-search input {\n  flex: 1;\n  min-width: 160px;\n}\n\n.settings-session-import-search input,\n.settings-session-import-pagination select {\n  box-sizing: border-box;\n  color: var(--settings-text);\n  background: var(--settings-bg);\n  border: 1px solid var(--settings-border);\n  border-radius: 6px;\n}\n\n.settings-session-import-search input,\n.settings-session-import-search .settings-command-button {\n  box-sizing: border-box;\n  height: 36px;\n  min-height: 36px;\n  padding: 6px 10px;\n  border-radius: 6px;\n}\n\n.settings-session-import-pagination select {\n  min-height: 28px;\n  padding: 2px 8px;\n}\n\n.settings-session-import-search input:focus-visible,\n.settings-session-import-pagination select:focus-visible {\n  outline: 2px solid var(--settings-focus);\n  outline-offset: 2px;\n}\n\n.settings-session-import-pagination {\n  color: var(--settings-muted);\n  font-size: 12px;\n  line-height: 18px;\n}\n\n.settings-session-import-pagination label {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.settings-session-import-pagination > span {\n  flex: none;\n  min-width: 0;\n}\n\n.settings-session-import-pagination__navigation {\n  display: flex;\n  gap: 8px;\n  margin-left: auto;\n}\n\n.settings-session-import-content,\n.settings-session-import-list {\n  display: grid;\n  gap: 10px;\n}\n\n.settings-session-import-content {\n  margin-top: 16px;\n}\n\n.settings-session-import-status {\n  display: flex;\n  align-items: center;\n  min-height: 0;\n  gap: 12px;\n  padding: 12px 16px;\n  color: var(--settings-muted);\n  background: var(--settings-panel);\n  border: 1px solid var(--settings-border);\n  border-radius: 8px;\n}\n\n.settings-session-import-status.is-error {\n  color: #ef4444;\n}\n\n.settings-session-import-recovery {\n  display: grid;\n  justify-items: start;\n  gap: 14px;\n  padding: 16px;\n  background: var(--settings-panel);\n  border: 1px solid var(--settings-border);\n  border-radius: 8px;\n}\n\n.settings-session-import-recovery:focus-visible {\n  outline: 2px solid var(--settings-focus);\n  outline-offset: 2px;\n}\n\n.settings-session-import-recovery__copy {\n  display: grid;\n  gap: 4px;\n}\n\n.settings-session-import-recovery__copy strong {\n  color: var(--settings-text);\n  font-size: 14px;\n}\n\n.settings-session-import-recovery__copy p {\n  margin: 0;\n  color: var(--settings-muted);\n  font-size: 13px;\n  line-height: 20px;\n}\n\n.settings-session-import-recovery__path {\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  border: 1px solid var(--settings-border);\n  border-radius: 6px;\n}\n\n.settings-session-import-recovery__path code {\n  min-width: 0;\n  flex: 1;\n  padding: 8px 10px;\n  overflow-x: auto;\n  color: var(--settings-text);\n  font-size: 12px;\n  line-height: 20px;\n  white-space: nowrap;\n}\n\n.settings-session-import-recovery__path .settings-command-button {\n  min-height: 0;\n  flex: none;\n  border-width: 0 0 0 1px;\n  border-radius: 0;\n}\n\n.settings-session-import-row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: center;\n  gap: 20px;\n  min-width: 0;\n  padding: 16px;\n  background: var(--settings-panel);\n  border: 1px solid var(--settings-border);\n  border-radius: 8px;\n}\n\n.settings-session-import-row__copy {\n  display: grid;\n  min-width: 0;\n  gap: 4px;\n}\n\n.settings-session-import-row__copy strong {\n  overflow: hidden;\n  color: var(--settings-text);\n  font-size: 14px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.settings-session-import-row__copy span,\n.settings-session-import-row__cwd {\n  overflow: hidden;\n  color: var(--settings-muted);\n  font-size: 12px;\n  line-height: 18px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.settings-session-import-row__cwd {\n  display: block;\n  min-width: 0;\n  background: transparent;\n}\n\n.settings-session-import-row__action {\n  display: flex;\n  align-items: flex-end;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.settings-session-import-running {\n  color: var(--settings-muted);\n  font-size: 12px;\n}\n\n.settings-preference-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 32px;\n  min-height: 88px;\n  padding: 18px 0;\n  border-top: 1px solid var(--settings-divider);\n  border-bottom: 1px solid var(--settings-divider);\n}\n\n.settings-preference-row__copy {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-width: 0;\n  gap: 5px;\n}\n\n.settings-preference-row__copy strong {\n  color: var(--settings-text);\n  font-size: 15px;\n  font-weight: 600;\n  line-height: 22px;\n}\n\n.settings-preference-row__copy span {\n  max-width: 680px;\n  color: var(--settings-muted);\n  font-size: 13px;\n  line-height: 20px;\n}\n\n.settings-preference-switch {\n  display: inline-flex;\n  align-items: center;\n  width: 42px;\n  height: 24px;\n  flex: none;\n  padding: 2px;\n  border: 0;\n  border-radius: 999px;\n  background: var(--settings-surface-strong);\n  cursor: pointer;\n  transition: background 120ms ease;\n}\n\n.settings-preference-switch[aria-checked="true"] {\n  justify-content: flex-end;\n  background: var(--settings-focus);\n}\n\n.settings-preference-switch:focus-visible {\n  outline: 2px solid var(--settings-focus);\n  outline-offset: 2px;\n}\n\n.settings-preference-switch__thumb {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--settings-primary-text);\n  box-shadow: 0 1px 3px rgb(0 0 0 / 24%);\n}\n\n.settings-connection-page-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 18px;\n  margin-bottom: 18px;\n}\n\n.settings-connection-page-header .settings-section-label {\n  padding-bottom: 0;\n}\n\n.settings-connection-page-header .settings-page-description {\n  margin: 8px 0 0;\n}\n\n.settings-connection-page-header .settings-page-description + .settings-page-description {\n  margin-top: 8px;\n}\n\n.settings-update-header {\n  margin-bottom: 8px;\n}\n\n.settings-connections-content,\n.settings-plugins-content,\n.settings-connection-list,\n.settings-connection-rows {\n  min-width: 0;\n}\n\n.settings-connections-content,\n.settings-plugins-content {\n  display: grid;\n  gap: 12px;\n}\n\n.settings-connection-list {\n  overflow: hidden;\n  background: var(--settings-surface);\n  border: 1px solid var(--settings-border);\n  border-radius: 10px;\n}\n\n.settings-segmented {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: center;\n  width: fit-content;\n  max-width: 100%;\n  padding: 2px;\n  gap: 3px;\n  background: var(--settings-surface-strong);\n  border-radius: 10px;\n}\n\n.settings-segmented__item {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 28px;\n  padding: 4px 14px;\n  color: var(--settings-muted);\n  font: inherit;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 18px;\n  white-space: nowrap;\n  background: transparent;\n  border: 0;\n  border-radius: 8px;\n  cursor: pointer;\n  transition:\n    color 0.15s ease,\n    background-color 0.15s ease,\n    box-shadow 0.15s ease;\n}\n\n.settings-segmented__item:hover {\n  color: var(--settings-text);\n  background: var(--settings-hover);\n}\n\n.settings-segmented__item--selected,\n.settings-segmented__item[aria-selected="true"],\n.settings-segmented__item[aria-pressed="true"] {\n  color: var(--settings-text);\n  background: var(--settings-elevated);\n  box-shadow: var(--settings-segmented-shadow);\n}\n\n.settings-segmented__item:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.settings-segmented__item:disabled:hover {\n  color: var(--settings-muted);\n  background: transparent;\n}\n\n.settings-segmented__item:focus-visible,\n.settings-connection-row:focus-visible,\n.settings-connection-install-link:focus-visible,\n.settings-connection-view-error:focus-visible {\n  outline: 2px solid var(--settings-focus);\n  outline-offset: 1px;\n}\n\n\n.settings-connection-host-tabs {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  gap: 6px;\n  overflow-x: auto;\n  overflow-y: hidden;\n  overscroll-behavior-x: contain;\n  scrollbar-width: none;\n  scroll-behavior: smooth;\n  scroll-snap-type: x proximity;\n  touch-action: pan-x;\n}\n\n.settings-connection-host-tabs::-webkit-scrollbar {\n  display: none;\n}\n\n.settings-connection-host-tab {\n  display: inline-flex;\n  align-items: center;\n  height: 30px;\n  min-width: max-content;\n  flex: none;\n  padding: 0 9px;\n  color: var(--settings-muted);\n  font: inherit;\n  font-size: 12px;\n  line-height: 18px;\n  white-space: nowrap;\n  background: var(--settings-inset);\n  border: 1px solid var(--settings-border);\n  border-radius: 7px;\n  cursor: pointer;\n  scroll-snap-align: start;\n}\n\n.settings-connection-host-tab:hover {\n  color: var(--settings-text);\n  background: var(--settings-hover);\n}\n\n.settings-connection-host-tab[aria-selected="true"] {\n  color: var(--settings-text);\n  font-weight: 600;\n  background: var(--settings-active);\n  border-color: var(--settings-border);\n}\n\n.settings-connection-table-header,\n.settings-connection-row {\n  display: grid;\n  /* Component : Status : Actions = 4 : 3 : 3 */\n  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr);\n  align-items: center;\n  min-width: 0;\n  column-gap: 16px;\n}\n\n.settings-connection-table-header {\n  min-height: 30px;\n  padding: 0 10px;\n  color: var(--settings-muted);\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 16px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  background: var(--settings-surface);\n  border-bottom: 1px solid var(--settings-divider);\n}\n\n.settings-connection-rows > .settings-connection-row,\n.settings-connection-rows > .settings-connection-block {\n  border-bottom: 1px solid var(--settings-divider);\n}\n\n.settings-connection-rows > .settings-connection-row:last-child,\n.settings-connection-rows > .settings-connection-block:last-child {\n  border-bottom: 0;\n}\n\n.settings-connection-row {\n  min-height: 52px;\n  padding: 8px 10px;\n  cursor: pointer;\n}\n\n.settings-connection-row:hover {\n  background: var(--settings-hover);\n}\n\n.settings-connection-row[data-connection-selected="true"] {\n  background: var(--settings-surface);\n}\n\n.settings-connection-row__identity,\n.settings-connection-inspector__identity {\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  gap: 8px;\n  color: var(--settings-text);\n}\n\n.settings-connection-row__identity strong,\n.settings-connection-inspector__identity strong {\n  min-width: 0;\n  overflow-wrap: anywhere;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 18px;\n}\n\n.settings-connection-row__mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  flex: none;\n  color: var(--settings-mark);\n  font-size: 10px;\n  font-weight: 700;\n  background: var(--settings-surface-strong);\n  border-radius: 7px;\n}\n\n.settings-connection-row__mark--logo {\n  color: var(--settings-text);\n  background: transparent;\n}\n\n.settings-connection-row__mark--logo > img,\n.settings-connection-row__mark--logo > svg {\n  display: block;\n  max-width: 18px;\n  max-height: 18px;\n}\n\n.settings-connection-table-header > :last-child {\n  text-align: end;\n}\n\n.settings-connection-row__status {\n  display: inline-flex;\n  align-items: center;\n  width: fit-content;\n  max-width: 100%;\n  gap: 6px;\n  color: var(--settings-muted);\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 18px;\n}\n\n.settings-connection-row__status::before {\n  width: 6px;\n  height: 6px;\n  flex: none;\n  content: "";\n  background: currentColor;\n  border-radius: 50%;\n}\n\n.settings-connection-row__status[data-connection-tone="ready"] {\n  color: var(--settings-success);\n}\n\n.settings-connection-row__status[data-connection-tone="checking"] {\n  color: var(--settings-warning);\n}\n\n.settings-connection-row__status[data-connection-tone="setup"] {\n  color: var(--settings-muted);\n}\n\n.settings-connection-row__status[data-connection-tone="setup"]::before {\n  background: transparent;\n  border: 1.5px solid currentColor;\n}\n\n.settings-connection-row__status[data-connection-tone="failed"] {\n  color: var(--settings-danger);\n}\n\n.settings-connection-row__action {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  min-width: 0;\n  gap: 4px;\n}\n\n.settings-connection-row__handle {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  color: var(--settings-muted);\n  cursor: grab;\n  opacity: 0.6;\n}\n\n.settings-connection-row__handle:hover {\n  opacity: 1;\n}\n\n.settings-connection-row[draggable="true"] {\n  cursor: grab;\n}\n\n.settings-connection-row[data-connection-dragging="true"] {\n  opacity: 0.4;\n}\n\n.settings-connection-row[data-connection-drop-indicator="before"] {\n  box-shadow: inset 0 2px 0 0 var(--settings-focus);\n}\n\n.settings-connection-row[data-connection-drop-indicator="after"] {\n  box-shadow: inset 0 -2px 0 0 var(--settings-focus);\n}\n\n.settings-connection-inline-detail {\n  display: grid;\n  gap: 12px;\n  margin-top: 2px;\n  padding: 14px 12px 16px;\n  border-top: 1px solid var(--settings-divider);\n  background: var(--settings-inset);\n}\n\n.settings-connection-group-divider {\n  padding: 10px 12px 6px;\n  color: var(--settings-muted);\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 16px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  /* No border-top here: the row immediately above already carries its own\n     border-bottom (it is no longer :last-child once this divider follows\n     it), so adding one here would double the separator line. */\n}\n\n.settings-connection-group-divider[data-connection-drag-over="true"] {\n  color: var(--settings-focus);\n  background: rgb(51 156 255 / 8%);\n  border-radius: 6px;\n}\n\n.settings-connection-group-more[data-connection-drag-over="true"] {\n  background: rgb(51 156 255 / 8%);\n}\n\n.settings-connection-group-hint {\n  display: grid;\n  gap: 3px;\n  margin: 0 12px 12px;\n  padding: 14px 16px;\n  text-align: center;\n  border: 1.5px dashed var(--settings-border);\n  border-radius: 10px;\n}\n\n.settings-connection-group-more[data-connection-drag-over="true"] .settings-connection-group-hint {\n  border-color: var(--settings-focus);\n}\n\n.settings-connection-group-hint strong {\n  color: var(--settings-text);\n  font-size: 12.5px;\n  font-weight: 500;\n  line-height: 18px;\n}\n\n.settings-connection-group-hint span {\n  color: var(--settings-muted);\n  font-size: 12px;\n  line-height: 17px;\n}\n\n.settings-connection-group-reset {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  gap: 6px;\n  padding: 10px 12px;\n  color: var(--settings-muted);\n  font: inherit;\n  font-size: 12px;\n  text-align: left;\n  background: transparent;\n  border: 0;\n  border-top: 1px solid var(--settings-divider);\n  cursor: pointer;\n}\n\n.settings-connection-group-reset:hover {\n  color: var(--settings-text);\n  background: var(--settings-hover);\n}\n\n.settings-connection-install-link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  padding: 0;\n  color: var(--settings-focus);\n  font: inherit;\n  text-decoration: none;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 7px;\n  cursor: pointer;\n}\n\n.settings-connection-install-link:hover,\n.settings-connection-install-link:focus-visible {\n  color: var(--settings-focus);\n  background: var(--settings-active);\n  border-color: var(--settings-border);\n}\n\n.settings-connection-view-error {\n  padding: 4px 7px;\n  color: var(--settings-danger);\n  font: inherit;\n  font-size: 11px;\n  line-height: 18px;\n  background: transparent;\n  border: 0;\n  border-radius: 6px;\n  cursor: pointer;\n}\n\n.settings-connection-view-error:hover {\n  color: var(--settings-danger);\n  background: var(--settings-danger-bg);\n}\n\n.settings-connection-inspector {\n  position: sticky;\n  top: 18px;\n}\n\n.settings-connection-inspector__header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  min-width: 0;\n  gap: 10px;\n  padding: 12px;\n  border-bottom: 1px solid var(--settings-divider);\n}\n\n.settings-connection-inspector__body {\n  display: grid;\n  min-width: 0;\n  gap: 12px;\n  padding: 12px;\n}\n\n.settings-connection-install-callout {\n  display: grid;\n  grid-template-columns: 28px minmax(0, 1fr);\n  gap: 9px;\n  padding: 11px;\n  background: var(--settings-surface);\n  border: 0;\n  border-radius: 8px;\n}\n\n.settings-connection-install-callout__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  color: var(--settings-focus);\n  background: var(--settings-active);\n  border-radius: 7px;\n}\n\n.settings-connection-install-callout strong,\n.settings-connection-error-summary strong,\n.settings-connection-state-summary strong {\n  display: block;\n  margin: 0 0 4px;\n  color: var(--settings-text);\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 18px;\n}\n\n.settings-connection-install-callout p,\n.settings-connection-error-summary p,\n.settings-connection-state-summary p,\n.settings-connection-issue-note {\n  margin: 0;\n  color: var(--settings-muted);\n  font-size: 11px;\n  line-height: 16px;\n}\n\n.settings-connection-install-command {\n  display: grid;\n  gap: 4px;\n  margin-top: 8px;\n}\n\n.settings-connection-install-command span {\n  color: var(--settings-muted);\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 14px;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n.settings-connection-install-command code {\n  display: block;\n  min-width: 0;\n  overflow-wrap: anywhere;\n  color: var(--settings-text);\n  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;\n  font-size: 11px;\n  line-height: 16px;\n  white-space: pre-wrap;\n}\n\n.settings-connection-install-actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 8px;\n}\n\n.settings-connection-copy-prompt {\n  position: relative;\n}\n\n.settings-connection-copy-prompt__tooltip {\n  position: absolute;\n  z-index: 4;\n  bottom: calc(100% + 6px);\n  left: 0;\n  width: max-content;\n  max-width: min(360px, 72vw);\n  max-height: 180px;\n  overflow: auto;\n  padding: 8px 10px;\n  color: var(--settings-text);\n  font-size: 11px;\n  line-height: 16px;\n  white-space: pre-wrap;\n  text-align: left;\n  background: var(--settings-elevated);\n  border: 1px solid var(--settings-border);\n  border-radius: 8px;\n  box-shadow: 0 10px 24px rgb(0 0 0 / 22%);\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  transition: opacity 120ms ease;\n}\n\n.settings-connection-copy-prompt:hover .settings-connection-copy-prompt__tooltip,\n.settings-connection-copy-prompt:focus-within .settings-connection-copy-prompt__tooltip {\n  opacity: 1;\n  visibility: visible;\n}\n\n.settings-connection-error-summary {\n  padding: 13px 14px;\n  color: var(--settings-danger);\n  background: var(--settings-danger-bg);\n  border: 1px solid var(--settings-danger-border);\n  border-radius: 10px;\n}\n\n.settings-connection-error-metadata {\n  display: grid;\n  gap: 7px;\n  padding: 12px;\n  background: var(--settings-inset);\n  border: 1px solid var(--settings-border);\n  border-radius: 9px;\n}\n\n.settings-connection-detail-line {\n  display: grid;\n  grid-template-columns: 92px minmax(0, 1fr);\n  gap: 10px;\n  min-width: 0;\n  color: var(--settings-muted);\n  font-size: 10px;\n  line-height: 16px;\n}\n\n.settings-connection-detail-line code {\n  min-width: 0;\n  overflow-wrap: anywhere;\n  color: var(--settings-text);\n  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;\n  white-space: pre-wrap;\n}\n\n.settings-connection-error-log-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n}\n\n.settings-connection-error-log-header strong {\n  color: var(--settings-text);\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.settings-connection-error-log-header .settings-command-button {\n  min-height: 30px;\n  padding: 5px 9px;\n  font-size: 11px;\n}\n\n.settings-connection-stderr {\n  max-height: 220px;\n  min-width: 0;\n  margin: 0;\n  padding: 11px;\n  overflow: auto;\n  color: var(--settings-text);\n  font:\n    10px/16px ui-monospace,\n    "SFMono-Regular",\n    Consolas,\n    "Liberation Mono",\n    monospace;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  background: var(--settings-inset);\n  border: 1px solid var(--settings-border);\n  border-radius: 9px;\n}\n\n.settings-connection-error-actions {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: 8px;\n}\n\n.settings-connection-error-actions .settings-command-button {\n  width: 100%;\n}\n\n.settings-connection-issue-note {\n  margin-top: -4px;\n}\n\n.settings-connection-state-summary {\n  padding: 14px;\n  background: var(--settings-surface);\n  border: 1px solid var(--settings-border);\n  border-radius: 10px;\n}\n\n.settings-empty {\n  display: flex;\n  align-items: center;\n  min-height: 72px;\n  padding: 12px 16px;\n}\n\n.settings-empty > div {\n  display: grid;\n  min-width: 0;\n  gap: 2px;\n}\n\n.settings-empty strong {\n  color: var(--settings-text);\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 19px;\n}\n\n.settings-empty span {\n  color: var(--settings-muted);\n  font-size: 13px;\n  line-height: 19px;\n}\n\n.settings-about-page {\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n  box-sizing: border-box;\n  min-height: min(620px, calc(100vh - 200px));\n  max-width: 720px;\n}\n\n.settings-about-page > .settings-section-label {\n  padding-bottom: 10px;\n}\n\n.settings-about-panel {\n  display: grid;\n  gap: 18px;\n  padding: 24px;\n  background: var(--settings-panel);\n  border: 1px solid var(--settings-border);\n  border-radius: 12px;\n}\n\n.settings-about-product {\n  color: var(--settings-text);\n  font-size: 24px;\n  font-weight: 700;\n  line-height: 32px;\n}\n\n.settings-about-tagline {\n  color: var(--settings-text);\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 24px;\n}\n\n.settings-about-copy {\n  display: grid;\n  max-width: 660px;\n  gap: 12px;\n}\n\n.settings-about-lead,\n.settings-about-extension,\n.settings-about-closing p,\n.settings-about-copy p {\n  margin: 0;\n  color: var(--settings-muted);\n  font-size: 13px;\n  line-height: 21px;\n}\n\n.settings-about-lead {\n  color: var(--settings-text);\n  font-weight: 500;\n}\n\n.settings-about-agents {\n  display: grid;\n  gap: 10px;\n  margin: 2px 0;\n  padding: 0;\n  list-style: none;\n}\n\n.settings-about-agent {\n  display: grid;\n  gap: 4px;\n  padding-left: 2px;\n}\n\n.settings-about-agent-name {\n  color: var(--settings-text);\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 18px;\n}\n\n.settings-about-agent-name::before {\n  content: "\xB7 ";\n  color: var(--settings-muted);\n  font-weight: 600;\n}\n\n.settings-about-agent-description {\n  display: block;\n  padding-left: 0.85em;\n  color: var(--settings-muted);\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 18px;\n}\n\n.settings-about-closing {\n  display: grid;\n  gap: 8px;\n}\n\n.settings-about-repository {\n  gap: 10px;\n}\n\n.settings-about-open-source {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 0.35em;\n  margin: 0;\n  color: var(--settings-muted);\n  font-size: 13px;\n  line-height: 21px;\n}\n\n.settings-about-repository p {\n  margin: 0;\n  color: var(--settings-muted);\n  font-size: 13px;\n  line-height: 21px;\n}\n\n.settings-about-star-callout {\n  margin: 4px 0 0;\n  color: var(--settings-warning);\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 22px;\n}\n\n.settings-about-repository-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  color: #7cb8ff;\n  font-weight: 600;\n  line-height: 1;\n  text-decoration: none;\n}\n\n.settings-about-repository-link .codexhost-settings-icon {\n  display: block;\n  flex: none;\n}\n\n.settings-about-repository-link:hover {\n  text-decoration: underline;\n}\n\n.settings-about-brand {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  margin-top: auto;\n  padding-top: 12px;\n  color: inherit;\n  opacity: 0.9;\n  text-decoration: none;\n  transition: opacity 160ms ease;\n}\n\n.settings-about-brand:hover {\n  opacity: 1;\n}\n\n.settings-about-brand-video {\n  width: 40px;\n  height: 40px;\n  flex: none;\n  overflow: hidden;\n  object-fit: cover;\n  border-radius: 999px;\n  box-shadow: 0 1px 2px rgb(0 0 0 / 18%);\n}\n\n.settings-about-brand-copy {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 2px;\n}\n\n.settings-about-brand-name {\n  color: var(--settings-text);\n  font-size: 14px;\n  font-weight: 800;\n  letter-spacing: 0.18em;\n  line-height: 18px;\n}\n\n.settings-about-brand-tagline {\n  color: var(--settings-muted);\n  font-size: 12px;\n  font-weight: 500;\n  letter-spacing: 0.18em;\n  line-height: 16px;\n}\n\n.settings-page-error {\n  padding: 16px;\n  color: var(--settings-text);\n  font-size: 13px;\n  background: var(--settings-panel);\n  border: 1px solid var(--settings-border);\n  border-radius: 20px;\n}\n\n.settings-update-metadata {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 24px;\n  margin-bottom: 24px;\n  padding: 0 0 20px;\n  border-bottom: 1px solid var(--settings-divider);\n}\n\n.settings-update-metadata__item {\n  display: grid;\n  min-width: 0;\n  gap: 4px;\n}\n\n.settings-update-metadata__item span {\n  color: var(--settings-muted);\n  font-size: 12px;\n  line-height: 18px;\n}\n\n.settings-update-metadata__item strong {\n  min-width: 0;\n  overflow-wrap: anywhere;\n  color: var(--settings-text);\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 22px;\n}\n\n/* The only emphasis on this screen: a latest version newer than the installed one. */\n.settings-update-metadata__value--newer {\n  color: var(--settings-focus);\n}\n\n.settings-update-panel {\n  display: grid;\n  gap: 12px;\n  padding: 20px;\n  color: var(--settings-text);\n  background: var(--settings-panel);\n  border: 1px solid var(--settings-border);\n  border-radius: 8px;\n}\n\n/* Soft status copy and the Update action should not sit in a framed card. */\n.settings-update-panel[data-update-state="unavailable"],\n.settings-update-panel[data-update-state="failed"],\n.settings-update-panel[data-update-state="error"],\n.settings-update-panel[data-update-state="available"] {\n  padding: 4px 0 0;\n  border: 0;\n  border-radius: 0;\n}\n\n.settings-update-panel__status-row {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 8px;\n  min-width: 0;\n}\n\n.settings-update-panel__status-row .settings-update-actions {\n  flex: none;\n}\n\n.settings-update-panel__status-row .settings-update-panel__head {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.settings-update-panel__head {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  gap: 8px;\n}\n\n.settings-update-panel__head .codexhost-settings-icon {\n  color: var(--settings-muted);\n}\n\n.settings-update-panel[data-update-state="available"]\n  .settings-update-panel__head\n  .codexhost-settings-icon,\n.settings-update-panel[data-update-state="downloading"]\n  .settings-update-panel__head\n  .codexhost-settings-icon,\n.settings-update-panel[data-update-state="installing"]\n  .settings-update-panel__head\n  .codexhost-settings-icon,\n.settings-update-panel[data-update-state="restarting"]\n  .settings-update-panel__head\n  .codexhost-settings-icon {\n  color: var(--settings-focus);\n}\n\n.settings-update-panel[data-update-state="current"]\n  .settings-update-panel__head\n  .codexhost-settings-icon {\n  color: var(--settings-success);\n}\n\n.settings-update-panel[data-update-state="failed"]\n  .settings-update-panel__head\n  .codexhost-settings-icon,\n.settings-update-panel[data-update-state="error"]\n  .settings-update-panel__head\n  .codexhost-settings-icon {\n  color: var(--settings-danger);\n}\n\n.settings-update-panel[data-update-state="unavailable"]\n  .settings-update-panel__head\n  .codexhost-settings-icon {\n  color: var(--settings-muted);\n}\n\n.settings-update-panel__title {\n  min-width: 0;\n  overflow-wrap: anywhere;\n  color: var(--settings-text);\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 22px;\n}\n\n.settings-update-summary,\n.settings-update-error {\n  margin: 0;\n  overflow-wrap: anywhere;\n  font-size: 13px;\n  line-height: 20px;\n}\n\n.settings-update-summary {\n  color: var(--settings-muted);\n}\n\n.settings-update-error {\n  color: var(--settings-danger);\n}\n\n.settings-update-progress {\n  width: 100%;\n  height: 8px;\n  accent-color: var(--settings-focus);\n}\n\n.settings-update-progress-detail {\n  color: var(--settings-muted);\n  font-size: 12px;\n  line-height: 18px;\n}\n\n/* Release notes scroll with the page; a scroller inside a scroller traps the wheel. */\n.settings-update-notes-section {\n  min-width: 0;\n  margin-top: 24px;\n  padding-top: 24px;\n  border-top: 1px solid var(--settings-divider);\n}\n\n.settings-update-notes-section:empty {\n  display: none;\n}\n\n.settings-update-notes {\n  display: grid;\n  min-width: 0;\n  gap: 12px;\n  color: var(--settings-muted);\n  font-size: 14px;\n  line-height: 22px;\n  overflow-wrap: anywhere;\n}\n\n.settings-update-notes > :first-child {\n  margin-top: 0;\n}\n\n.settings-update-notes > :last-child {\n  margin-bottom: 0;\n}\n\n.settings-update-notes h1,\n.settings-update-notes h2,\n.settings-update-notes h3,\n.settings-update-notes h4,\n.settings-update-notes h5,\n.settings-update-notes h6 {\n  margin: 6px 0 0;\n  color: var(--settings-text);\n  font-weight: 600;\n}\n\n.settings-update-notes h1 {\n  font-size: 18px;\n  line-height: 26px;\n}\n\n.settings-update-notes h2 {\n  font-size: 17px;\n  line-height: 24px;\n}\n\n.settings-update-notes h3,\n.settings-update-notes h4,\n.settings-update-notes h5,\n.settings-update-notes h6 {\n  font-size: 14px;\n  line-height: 22px;\n}\n\n.settings-update-notes p,\n.settings-update-notes ul,\n.settings-update-notes ol,\n.settings-update-notes pre,\n.settings-update-notes blockquote {\n  margin: 0;\n}\n\n.settings-update-notes ul,\n.settings-update-notes ol {\n  padding-left: 24px;\n}\n\n.settings-update-notes li {\n  padding-left: 4px;\n}\n\n.settings-update-notes li::marker {\n  color: var(--settings-muted);\n  font-size: 0.85em;\n}\n\n.settings-update-notes li + li {\n  margin-top: 14px;\n}\n\n.settings-update-notes .release-note-translation {\n  display: block;\n  margin-top: 3px;\n  color: var(--settings-muted);\n  font-size: 13px;\n  line-height: 20px;\n}\n\n.settings-update-notes blockquote {\n  padding: 8px 12px;\n  color: var(--settings-muted);\n  border-left: 3px solid var(--settings-focus);\n  background: var(--settings-surface);\n}\n\n.settings-update-notes hr {\n  width: 100%;\n  margin: 2px 0;\n  border: 0;\n  border-top: 1px solid var(--settings-divider);\n}\n\n.settings-update-notes strong {\n  color: var(--settings-text);\n  font-weight: 600;\n}\n\n.settings-update-notes a {\n  color: var(--settings-focus);\n  text-decoration: none;\n}\n\n.settings-update-notes a:hover {\n  text-decoration: underline;\n}\n\n.settings-update-notes code {\n  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;\n  font-size: 12px;\n}\n\n.settings-update-notes :not(pre) > code {\n  padding: 1px 5px;\n  background: var(--settings-surface-strong);\n  border-radius: 4px;\n}\n\n.settings-update-notes pre {\n  min-width: 0;\n  max-width: 100%;\n  padding: 10px 12px;\n  overflow-x: auto;\n  overflow-y: hidden;\n  background: var(--settings-inset);\n  border-radius: 6px;\n}\n\n.settings-update-notes pre code {\n  line-height: 18px;\n  white-space: pre-wrap;\n}\n\n/* Manual update sits directly under the status panel, not behind a disclosure:\n   automatic updates can fail for machine-local reasons and this is the way out. */\n.settings-update-controls {\n  display: grid;\n  min-width: 0;\n  gap: 10px;\n  margin-top: 24px;\n}\n\n.settings-update-manual-title {\n  color: var(--settings-text);\n  font-size: 15px;\n  font-weight: 600;\n  line-height: 22px;\n}\n\n.settings-update-manual {\n  display: grid;\n  min-width: 0;\n  gap: 8px;\n}\n\n.settings-update-manual[hidden] {\n  display: none;\n}\n\n.settings-update-manual-description {\n  margin: 0;\n  color: var(--settings-muted);\n  font-size: 12px;\n  line-height: 18px;\n}\n\n.settings-update-manual-description.is-fallback {\n  color: var(--settings-danger);\n}\n\n.settings-update-command {\n  display: flex;\n  align-items: stretch;\n  min-width: 0;\n  overflow: hidden;\n  border: 1px solid var(--settings-border);\n  border-radius: 6px;\n}\n\n.settings-update-command code {\n  min-width: 0;\n  flex: 1;\n  padding: 9px 12px;\n  overflow-x: auto;\n  color: var(--settings-text);\n  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;\n  font-size: 12px;\n  line-height: 20px;\n  white-space: nowrap;\n}\n\n.settings-update-command__copy {\n  display: inline-flex;\n  align-items: center;\n  flex: none;\n  gap: 6px;\n  padding: 0 12px;\n  color: var(--settings-muted);\n  font-size: 12px;\n  background: transparent;\n  border: 0;\n  border-left: 1px solid var(--settings-border);\n  cursor: pointer;\n}\n\n.settings-update-command__copy:hover {\n  color: var(--settings-text);\n  background: var(--settings-hover);\n}\n\n.settings-update-command__copy:focus-visible {\n  outline: 2px solid var(--settings-focus);\n  outline-offset: -2px;\n}\n\n.settings-update-actions {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.settings-command-button,\n.settings-update-link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: max-content;\n  max-width: 100%;\n  min-height: 30px;\n  gap: 6px;\n  padding: 5px 10px;\n  white-space: nowrap;\n  color: var(--settings-primary-text);\n  font: inherit;\n  font-size: 12px;\n  text-decoration: none;\n  background: var(--settings-primary);\n  border: 1px solid var(--settings-primary);\n  border-radius: 7px;\n  cursor: pointer;\n}\n\n.settings-command-button--secondary,\n.settings-update-link {\n  color: var(--settings-muted);\n  background: transparent;\n  border-color: var(--settings-border);\n}\n\n.settings-command-button--secondary .codexhost-settings-icon,\n.settings-update-link .codexhost-settings-icon {\n  color: var(--settings-muted);\n}\n\n.settings-command-button:hover:not(.settings-command-button--secondary) {\n  filter: brightness(1.08);\n}\n\n.settings-command-button--danger {\n  color: var(--settings-danger);\n}\n\n.settings-command-button--danger:hover:not(:disabled) {\n  color: #fecaca;\n  background: var(--settings-danger-bg);\n  border-color: var(--settings-danger-border);\n}\n\n.settings-command-button--secondary:hover,\n.settings-update-link:hover {\n  color: var(--settings-text);\n  background: var(--settings-hover);\n}\n\n.settings-command-button--secondary:hover .codexhost-settings-icon,\n.settings-update-link:hover .codexhost-settings-icon {\n  color: var(--settings-text);\n}\n\n.settings-command-button:disabled,\n.settings-command-button[aria-disabled="true"] {\n  opacity: 0.55;\n  cursor: not-allowed;\n  filter: none;\n}\n\n.settings-command-button:focus-visible,\n.settings-update-link:focus-visible {\n  outline: 2px solid var(--settings-focus);\n  outline-offset: 2px;\n}\n\n.settings-visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.settings-session-import-content {\n  display: grid;\n  min-width: 0;\n  gap: 12px;\n  margin-top: 16px;\n}\n\n.settings-session-import-list {\n  display: grid;\n  min-width: 0;\n  overflow: hidden;\n  background: var(--settings-surface);\n  border: 1px solid var(--settings-border);\n  border-radius: 12px;\n}\n\n.settings-session-import-row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: center;\n  min-width: 0;\n  gap: 16px;\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--settings-divider);\n}\n\n.settings-session-import-row:last-child {\n  border-bottom: 0;\n}\n\n.settings-session-import-row__copy {\n  display: grid;\n  min-width: 0;\n  gap: 4px;\n}\n\n.settings-session-import-row__copy strong {\n  color: var(--settings-text);\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px;\n}\n\n.settings-session-import-row__copy span,\n.settings-session-import-row__cwd {\n  min-width: 0;\n  overflow-wrap: anywhere;\n  color: var(--settings-muted);\n  font-size: 12px;\n  line-height: 18px;\n}\n\n.settings-session-import-row__cwd {\n  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;\n}\n\n.settings-session-import-row__action {\n  display: flex;\n  align-items: center;\n  flex: none;\n  gap: 8px;\n}\n\n.settings-session-import-running {\n  color: #f5c542;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 18px;\n  white-space: nowrap;\n}\n\n.settings-session-import-recovery {\n  display: grid;\n  min-width: 0;\n  gap: 12px;\n  padding: 16px;\n  background: var(--settings-surface);\n  border: 1px solid var(--settings-border);\n  border-radius: 12px;\n}\n\n.settings-session-import-recovery__copy {\n  display: grid;\n  gap: 6px;\n}\n\n.settings-session-import-recovery__copy strong {\n  color: var(--settings-text);\n  font-size: 15px;\n  font-weight: 600;\n  line-height: 22px;\n}\n\n.settings-session-import-recovery__copy p {\n  margin: 0;\n  color: var(--settings-muted);\n  font-size: 13px;\n  line-height: 20px;\n}\n\n.settings-session-import-recovery__path {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  gap: 8px;\n}\n\n.settings-session-import-recovery__path code {\n  min-width: 0;\n  flex: 1;\n  overflow-wrap: anywhere;\n  color: var(--settings-text);\n  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;\n  font-size: 12px;\n  line-height: 18px;\n}\n\n.codexhost-settings-icon {\n  display: block;\n  flex: none;\n  stroke: currentColor;\n}\n\n@media (max-width: 720px) {\n  .codexhost-settings-dialog {\n    width: calc(100vw - 16px);\n    height: calc(100vh - 16px);\n    border-radius: 10px;\n  }\n\n  .settings-layout {\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-rows: auto minmax(0, 1fr);\n  }\n\n  .settings-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--settings-border);\n  }\n\n  .settings-header {\n    height: 56px;\n    padding-inline: 14px;\n  }\n\n  .settings-sidebar {\n    padding-top: 20px;\n  }\n\n  .settings-nav {\n    flex: none;\n    flex-direction: row;\n    gap: 4px;\n    padding: 7px 8px 8px;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n\n  .settings-nav-section-label {\n    display: none;\n  }\n\n  .settings-nav-button {\n    width: auto;\n    min-width: max-content;\n    min-height: 34px;\n    grid-template-columns: 16px auto;\n    border-radius: 10px;\n  }\n\n  .settings-page__content {\n    width: calc(100% - 40px);\n  }\n\n  .settings-page__content {\n    padding-top: 32px;\n    padding-bottom: 32px;\n  }\n\n  .settings-section-label {\n    padding-bottom: 20px;\n    font-size: 20px;\n    line-height: 26px;\n  }\n\n  .settings-update-metadata {\n    grid-template-columns: minmax(0, 1fr);\n    gap: 16px;\n  }\n\n  .settings-status-row {\n    grid-template-columns: minmax(0, 1fr) auto;\n    gap: 16px;\n  }\n\n  .settings-account-header,\n  .settings-connection-page-header {\n    flex-direction: column;\n  }\n\n  .settings-account-header > .settings-command-button,\n  .settings-connection-page-header > .settings-command-button {\n    width: 100%;\n  }\n\n  .settings-session-import-row {\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  .settings-session-import-row__action {\n    justify-content: flex-start;\n    flex-wrap: wrap;\n  }\n\n  .settings-status-row__detail {\n    grid-column: 1 / -1;\n    margin: -8px 0 0 58px;\n  }\n}\n\n@media (forced-colors: active) {\n  :host,\n  :host([data-theme="light"]),\n  :host([data-theme="dark"]) {\n    --settings-bg: Canvas;\n    --settings-sidebar: Canvas;\n    --settings-panel: Canvas;\n    --settings-surface: Canvas;\n    --settings-surface-hover: Highlight;\n    --settings-inset: Canvas;\n    --settings-text: CanvasText;\n    --settings-muted: GrayText;\n    --settings-subtle: GrayText;\n    --settings-border: ButtonBorder;\n    --settings-divider: ButtonBorder;\n    --settings-hover: Highlight;\n    --settings-active: Highlight;\n    --settings-focus: Highlight;\n    --settings-elevated: Canvas;\n    --settings-surface-strong: Canvas;\n    --settings-mark: CanvasText;\n    --settings-primary: ButtonFace;\n    --settings-primary-hover: Highlight;\n    --settings-primary-text: ButtonText;\n    --settings-warning: CanvasText;\n    --settings-warning-bg: Canvas;\n    --settings-warning-border: ButtonBorder;\n    --settings-danger: CanvasText;\n    --settings-danger-bg: Canvas;\n    --settings-danger-border: ButtonBorder;\n    --settings-success: CanvasText;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    scroll-behavior: auto !important;\n    transition-duration: 0s !important;\n  }\n}\n';
+  var shell_default = ':host {\n  /* Inherit Codex Desktop color-scheme; light-dark() tracks the host page. */\n  --settings-bg: light-dark(#ffffff, #181818);\n  --settings-sidebar: light-dark(#f4f4f5, #1c1c1c);\n  --settings-panel: transparent;\n  --settings-text: light-dark(#171717, #f5f5f5);\n  --settings-muted: light-dark(#737373, #a1a1a1);\n  --settings-subtle: light-dark(#8a8a8a, #777777);\n  --settings-border: light-dark(rgb(15 23 42 / 10%), rgb(255 255 255 / 10%));\n  --settings-divider: light-dark(rgb(15 23 42 / 10%), rgb(255 255 255 / 10%));\n  --settings-hover: light-dark(rgb(15 23 42 / 5%), rgb(255 255 255 / 6%));\n  --settings-active: light-dark(rgb(51 156 255 / 14%), rgb(51 156 255 / 12%));\n  --settings-focus: #339cff;\n  --settings-elevated: light-dark(#ffffff, #2c2c2e);\n  --settings-inset: light-dark(rgb(15 23 42 / 4%), rgb(0 0 0 / 18%));\n  --settings-surface: light-dark(rgb(15 23 42 / 3%), rgb(255 255 255 / 2%));\n  --settings-surface-strong: light-dark(rgb(15 23 42 / 6%), rgb(255 255 255 / 6%));\n  --settings-surface-hover: light-dark(#eeeeee, #303030);\n  --settings-mark: light-dark(#52525b, #d4d8de);\n  --settings-dialog-shadow: light-dark(\n    0 24px 64px rgb(15 23 42 / 16%),\n    0 24px 64px rgb(0 0 0 / 38%)\n  );\n  --settings-backdrop: light-dark(rgb(15 23 42 / 28%), rgb(0 0 0 / 52%));\n  --settings-segmented-shadow:\n    0 0 0 0.5px light-dark(rgb(15 23 42 / 6%), rgb(0 0 0 / 4%)),\n    0 3px 1px 0 light-dark(rgb(15 23 42 / 4%), rgb(0 0 0 / 4%)),\n    0 3px 8px 0 light-dark(rgb(15 23 42 / 10%), rgb(0 0 0 / 12%));\n  --settings-primary: light-dark(#171717, #f4f4f4);\n  --settings-primary-hover: light-dark(#2f2f2f, #ffffff);\n  --settings-primary-text: light-dark(#ffffff, #171717);\n  --settings-warning: light-dark(#8a5500, #f5c96a);\n  --settings-warning-bg: light-dark(#fff8e6, rgb(245 201 106 / 8%));\n  --settings-warning-border: light-dark(#ead8a8, rgb(245 201 106 / 24%));\n  --settings-danger: light-dark(#b42318, #f87171);\n  --settings-danger-bg: light-dark(#fff1f0, rgb(239 68 68 / 8%));\n  --settings-danger-border: light-dark(#f3c7c3, rgb(239 68 68 / 22%));\n  --settings-success: light-dark(#16784a, #4ade80);\n  color: var(--settings-text);\n  color-scheme: inherit;\n  font:\n    13px/1.5 system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n  letter-spacing: 0;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  letter-spacing: 0;\n}\n\nbutton,\ninput,\nselect {\n  font: inherit;\n}\n\nbutton {\n  color: inherit;\n}\n\n[hidden] {\n  display: none !important;\n}\n\n.codexhost-settings-dialog {\n  width: min(1120px, calc(100vw - 32px));\n  height: min(780px, calc(100vh - 32px));\n  max-width: none;\n  max-height: none;\n  margin: auto;\n  padding: 0;\n  overflow: hidden;\n  color: var(--settings-text);\n  background: var(--settings-bg);\n  border: 1px solid var(--settings-border);\n  border-radius: 12px;\n  box-shadow: var(--settings-dialog-shadow);\n}\n\n.codexhost-settings-dialog::backdrop {\n  background: var(--settings-backdrop);\n}\n\n.settings-frame,\n.settings-layout {\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n}\n\n.settings-frame {\n  display: flex;\n  flex-direction: column;\n}\n\n.settings-layout {\n  flex: 1;\n  display: grid;\n  grid-template-columns: 184px minmax(0, 1fr);\n  background: var(--settings-bg);\n}\n\n.settings-sidebar {\n  display: flex;\n  min-width: 0;\n  min-height: 0;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--settings-sidebar);\n  border-right: 1px solid var(--settings-border);\n  padding-top: 14px;\n}\n\n.settings-header {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  height: 48px;\n  flex: none;\n  padding: 0 12px;\n  border-bottom: 1px solid var(--settings-border);\n}\n\n.settings-header-actions {\n  display: flex;\n  align-items: center;\n  flex: none;\n  gap: 12px;\n  margin-left: auto;\n}\n\n.settings-brand {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  gap: 7px;\n}\n\n.settings-brand__mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  flex: none;\n  color: var(--settings-text);\n}\n\n.settings-brand__mark .codexhost-settings-icon {\n  width: 24px;\n  height: 24px;\n  object-fit: contain;\n}\n\n.settings-brand__copy {\n  display: flex;\n  min-width: 0;\n  align-items: baseline;\n  gap: 0;\n  line-height: 20px;\n}\n\n.settings-brand__name {\n  overflow: hidden;\n  color: var(--settings-text);\n  font-size: 13px;\n  font-weight: 600;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.settings-brand__title {\n  margin-left: 8px;\n  padding-left: 8px;\n  color: var(--settings-muted);\n  font-size: 13px;\n  font-weight: 400;\n  border-left: 1px solid var(--settings-border);\n}\n\n.settings-nav {\n  display: flex;\n  min-width: 0;\n  min-height: 0;\n  flex: 1;\n  flex-direction: column;\n  gap: 2px;\n  padding: 0 7px 10px;\n  overflow-y: auto;\n}\n\n.settings-nav-section-label {\n  min-height: 28px;\n  padding: 7px 9px 3px 4px;\n  color: var(--settings-muted);\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 18px;\n}\n\n.settings-nav-section-label:not(:first-child) {\n  margin-top: 8px;\n}\n\n.settings-nav-button {\n  display: grid;\n  grid-template-columns: 16px minmax(0, 1fr);\n  align-items: center;\n  width: 100%;\n  position: relative;\n  min-height: 34px;\n  flex: none;\n  gap: 9px;\n  padding: 6px 9px;\n  color: var(--settings-text);\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 21px;\n  text-align: left;\n  background: transparent;\n  border: 0;\n  border-radius: 8px;\n  cursor: pointer;\n}\n\n.settings-nav-button .codexhost-settings-icon {\n  width: 16px;\n  height: 16px;\n  opacity: 0.9;\n}\n\n.settings-nav-button:hover {\n  background: var(--settings-hover);\n}\n\n.settings-nav-button[aria-current="page"] {\n  background: var(--settings-active);\n  color: var(--settings-text);\n  font-weight: 500;\n}\n\n.settings-nav-button span {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.settings-icon-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  flex: none;\n  padding: 0;\n  color: var(--settings-muted);\n  background: transparent;\n  border: 0;\n  border-radius: 8px;\n  cursor: pointer;\n}\n\n.settings-icon-button:hover {\n  color: var(--settings-text);\n  background: var(--settings-hover);\n}\n\n.settings-icon-button:focus-visible,\n.settings-nav-button:focus-visible {\n  outline: 2px solid var(--settings-focus);\n  outline-offset: 1px;\n}\n\n.settings-page {\n  display: block;\n  position: relative;\n  min-width: 0;\n  min-height: 0;\n  overflow-y: auto;\n  background: var(--settings-bg);\n  scrollbar-gutter: stable;\n}\n\n.settings-page__content {\n  width: min(930px, calc(100% - 80px));\n  margin-inline: auto;\n}\n\n.settings-page__content {\n  min-width: 0;\n  padding: 28px 0 36px;\n}\n\n.settings-section-label {\n  min-height: auto;\n  padding: 0 0 28px;\n  color: var(--settings-text);\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 26px;\n}\n\n.settings-status-list,\n.settings-empty {\n  overflow: hidden;\n  background: var(--settings-panel);\n}\n\n.settings-status-row {\n  display: grid;\n  grid-template-columns: minmax(170px, 1fr) auto minmax(280px, 1.45fr);\n  position: relative;\n  align-items: center;\n  min-height: 72px;\n  gap: 20px;\n  padding: 12px 0;\n}\n\n.settings-status-row:not(:last-child)::after {\n  content: "";\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: 1px;\n  background: var(--settings-divider);\n}\n\n.settings-status-row__identity {\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  color: var(--settings-text);\n  gap: 10px;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 22px;\n}\n\n.settings-status-row__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  flex: none;\n  color: var(--settings-muted);\n  background: var(--settings-surface-strong);\n  border-radius: 50%;\n}\n\n.settings-status-badge {\n  flex: none;\n  padding: 3px 8px;\n  color: var(--settings-muted);\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 18px;\n  background: var(--settings-surface-strong);\n  border: 1px solid var(--settings-border);\n  border-radius: 6px;\n}\n\n.settings-status-row__detail {\n  min-width: 0;\n  color: var(--settings-muted);\n  font-size: 13px;\n  line-height: 20px;\n}\n\n.settings-page-description {\n  max-width: 760px;\n  margin: -10px 0 20px;\n  color: var(--settings-muted);\n  font-size: 12px;\n  line-height: 18px;\n}\n\n.settings-session-import-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 24px;\n}\n\n.settings-session-import-header .settings-section-label {\n  min-width: 0;\n}\n\n.settings-session-import-harness {\n  display: flex;\n  min-width: 0;\n  margin: 0 0 16px;\n}\n\n.settings-session-import-harness__options {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  width: fit-content;\n  max-width: 100%;\n  gap: 8px;\n}\n\n.settings-session-import-harness__option {\n  min-height: 32px;\n  flex: none;\n  padding: 6px 10px;\n  color: var(--settings-muted);\n  font: inherit;\n  font-size: 12px;\n  white-space: nowrap;\n  background: transparent;\n  border: 1px solid var(--settings-border);\n  border-radius: 6px;\n  cursor: pointer;\n}\n\n.settings-session-import-harness__option[aria-pressed="true"] {\n  color: var(--settings-text);\n  background: var(--settings-active);\n  border-color: rgb(51 156 255 / 50%);\n}\n\n.settings-session-import-harness__option:disabled {\n  opacity: 0.38;\n  cursor: not-allowed;\n}\n\n.settings-session-import-harness__option:focus-visible {\n  outline: 2px solid var(--settings-focus);\n  outline-offset: 2px;\n}\n\n.settings-session-import-search,\n.settings-session-import-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 10px;\n}\n\n.settings-session-import-search {\n  align-items: stretch;\n  margin: 16px 0 0;\n}\n\n.settings-session-import-pagination {\n  margin: 16px 0 0;\n}\n\n.settings-session-import-search input {\n  flex: 1;\n  min-width: 160px;\n}\n\n.settings-session-import-search input,\n.settings-session-import-pagination select {\n  box-sizing: border-box;\n  color: var(--settings-text);\n  background: var(--settings-bg);\n  border: 1px solid var(--settings-border);\n  border-radius: 6px;\n}\n\n.settings-session-import-search input,\n.settings-session-import-search .settings-command-button {\n  box-sizing: border-box;\n  height: 36px;\n  min-height: 36px;\n  padding: 6px 10px;\n  border-radius: 6px;\n}\n\n.settings-session-import-pagination select {\n  min-height: 28px;\n  padding: 2px 8px;\n}\n\n.settings-session-import-search input:focus-visible,\n.settings-session-import-pagination select:focus-visible {\n  outline: 2px solid var(--settings-focus);\n  outline-offset: 2px;\n}\n\n.settings-session-import-pagination {\n  color: var(--settings-muted);\n  font-size: 12px;\n  line-height: 18px;\n}\n\n.settings-session-import-pagination label {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.settings-session-import-pagination > span {\n  flex: none;\n  min-width: 0;\n}\n\n.settings-session-import-pagination__navigation {\n  display: flex;\n  gap: 8px;\n  margin-left: auto;\n}\n\n.settings-session-import-content,\n.settings-session-import-list {\n  display: grid;\n  gap: 10px;\n}\n\n.settings-session-import-content {\n  margin-top: 16px;\n}\n\n.settings-session-import-status {\n  display: flex;\n  align-items: center;\n  min-height: 0;\n  gap: 12px;\n  padding: 12px 16px;\n  color: var(--settings-muted);\n  background: var(--settings-panel);\n  border: 1px solid var(--settings-border);\n  border-radius: 8px;\n}\n\n.settings-session-import-status.is-error {\n  color: #ef4444;\n}\n\n.settings-session-import-recovery {\n  display: grid;\n  justify-items: start;\n  gap: 14px;\n  padding: 16px;\n  background: var(--settings-panel);\n  border: 1px solid var(--settings-border);\n  border-radius: 8px;\n}\n\n.settings-session-import-recovery:focus-visible {\n  outline: 2px solid var(--settings-focus);\n  outline-offset: 2px;\n}\n\n.settings-session-import-recovery__copy {\n  display: grid;\n  gap: 4px;\n}\n\n.settings-session-import-recovery__copy strong {\n  color: var(--settings-text);\n  font-size: 14px;\n}\n\n.settings-session-import-recovery__copy p {\n  margin: 0;\n  color: var(--settings-muted);\n  font-size: 13px;\n  line-height: 20px;\n}\n\n.settings-session-import-recovery__path {\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  border: 1px solid var(--settings-border);\n  border-radius: 6px;\n}\n\n.settings-session-import-recovery__path code {\n  min-width: 0;\n  flex: 1;\n  padding: 8px 10px;\n  overflow-x: auto;\n  color: var(--settings-text);\n  font-size: 12px;\n  line-height: 20px;\n  white-space: nowrap;\n}\n\n.settings-session-import-recovery__path .settings-command-button {\n  min-height: 0;\n  flex: none;\n  border-width: 0 0 0 1px;\n  border-radius: 0;\n}\n\n.settings-session-import-row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: center;\n  gap: 20px;\n  min-width: 0;\n  padding: 16px;\n  background: var(--settings-panel);\n  border: 1px solid var(--settings-border);\n  border-radius: 8px;\n}\n\n.settings-session-import-row__copy {\n  display: grid;\n  min-width: 0;\n  gap: 4px;\n}\n\n.settings-session-import-row__copy strong {\n  overflow: hidden;\n  color: var(--settings-text);\n  font-size: 14px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.settings-session-import-row__copy span,\n.settings-session-import-row__cwd {\n  overflow: hidden;\n  color: var(--settings-muted);\n  font-size: 12px;\n  line-height: 18px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.settings-session-import-row__cwd {\n  display: block;\n  min-width: 0;\n  background: transparent;\n}\n\n.settings-session-import-row__action {\n  display: flex;\n  align-items: flex-end;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.settings-session-import-running {\n  color: var(--settings-muted);\n  font-size: 12px;\n}\n\n.settings-preference-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 32px;\n  min-height: 88px;\n  padding: 18px 0;\n  border-top: 1px solid var(--settings-divider);\n  border-bottom: 1px solid var(--settings-divider);\n}\n\n.settings-preference-row__copy {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-width: 0;\n  gap: 5px;\n}\n\n.settings-preference-row__copy strong {\n  color: var(--settings-text);\n  font-size: 15px;\n  font-weight: 600;\n  line-height: 22px;\n}\n\n.settings-preference-row__copy span {\n  max-width: 680px;\n  color: var(--settings-muted);\n  font-size: 13px;\n  line-height: 20px;\n}\n\n.settings-preference-switch {\n  display: inline-flex;\n  align-items: center;\n  width: 42px;\n  height: 24px;\n  flex: none;\n  padding: 2px;\n  border: 0;\n  border-radius: 999px;\n  background: var(--settings-surface-strong);\n  cursor: pointer;\n  transition: background 120ms ease;\n}\n\n.settings-preference-switch[aria-checked="true"] {\n  justify-content: flex-end;\n  background: var(--settings-focus);\n}\n\n.settings-preference-switch:focus-visible {\n  outline: 2px solid var(--settings-focus);\n  outline-offset: 2px;\n}\n\n.settings-preference-switch__thumb {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--settings-primary-text);\n  box-shadow: 0 1px 3px rgb(0 0 0 / 24%);\n}\n\n.settings-preference-checkbox {\n  width: 18px;\n  height: 18px;\n  flex: none;\n  margin: 0;\n  accent-color: var(--settings-focus);\n  cursor: pointer;\n}\n\n.settings-preference-checkbox:focus-visible {\n  outline: 2px solid var(--settings-focus);\n  outline-offset: 2px;\n}\n\n.settings-connection-page-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 18px;\n  margin-bottom: 18px;\n}\n\n.settings-connection-page-header .settings-section-label {\n  padding-bottom: 0;\n}\n\n.settings-connection-page-header .settings-page-description {\n  margin: 8px 0 0;\n}\n\n.settings-connection-page-header .settings-page-description + .settings-page-description {\n  margin-top: 8px;\n}\n\n.settings-update-header {\n  margin-bottom: 8px;\n}\n\n.settings-connections-content,\n.settings-plugins-content,\n.settings-connection-list,\n.settings-connection-rows {\n  min-width: 0;\n}\n\n.settings-connections-content,\n.settings-plugins-content {\n  display: grid;\n  gap: 12px;\n}\n\n.settings-connection-list {\n  overflow: hidden;\n  background: var(--settings-surface);\n  border: 1px solid var(--settings-border);\n  border-radius: 10px;\n}\n\n.settings-segmented {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: center;\n  width: fit-content;\n  max-width: 100%;\n  padding: 2px;\n  gap: 3px;\n  background: var(--settings-surface-strong);\n  border-radius: 10px;\n}\n\n.settings-segmented__item {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 28px;\n  padding: 4px 14px;\n  color: var(--settings-muted);\n  font: inherit;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 18px;\n  white-space: nowrap;\n  background: transparent;\n  border: 0;\n  border-radius: 8px;\n  cursor: pointer;\n  transition:\n    color 0.15s ease,\n    background-color 0.15s ease,\n    box-shadow 0.15s ease;\n}\n\n.settings-segmented__item:hover {\n  color: var(--settings-text);\n  background: var(--settings-hover);\n}\n\n.settings-segmented__item--selected,\n.settings-segmented__item[aria-selected="true"],\n.settings-segmented__item[aria-pressed="true"] {\n  color: var(--settings-text);\n  background: var(--settings-elevated);\n  box-shadow: var(--settings-segmented-shadow);\n}\n\n.settings-segmented__item:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.settings-segmented__item:disabled:hover {\n  color: var(--settings-muted);\n  background: transparent;\n}\n\n.settings-segmented__item:focus-visible,\n.settings-connection-row:focus-visible,\n.settings-connection-install-link:focus-visible,\n.settings-connection-view-error:focus-visible {\n  outline: 2px solid var(--settings-focus);\n  outline-offset: 1px;\n}\n\n.settings-connection-host-tabs {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  gap: 6px;\n  overflow-x: auto;\n  overflow-y: hidden;\n  overscroll-behavior-x: contain;\n  scrollbar-width: none;\n  scroll-behavior: smooth;\n  scroll-snap-type: x proximity;\n  touch-action: pan-x;\n}\n\n.settings-connection-host-tabs::-webkit-scrollbar {\n  display: none;\n}\n\n.settings-connection-host-tab {\n  display: inline-flex;\n  align-items: center;\n  height: 30px;\n  min-width: max-content;\n  flex: none;\n  padding: 0 9px;\n  color: var(--settings-muted);\n  font: inherit;\n  font-size: 12px;\n  line-height: 18px;\n  white-space: nowrap;\n  background: var(--settings-inset);\n  border: 1px solid var(--settings-border);\n  border-radius: 7px;\n  cursor: pointer;\n  scroll-snap-align: start;\n}\n\n.settings-connection-host-tab:hover {\n  color: var(--settings-text);\n  background: var(--settings-hover);\n}\n\n.settings-connection-host-tab[aria-selected="true"] {\n  color: var(--settings-text);\n  font-weight: 600;\n  background: var(--settings-active);\n  border-color: var(--settings-border);\n}\n\n.settings-connection-table-header,\n.settings-connection-row {\n  display: grid;\n  /* Component : Status : Actions = 4 : 3 : 3 */\n  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr);\n  align-items: center;\n  min-width: 0;\n  column-gap: 16px;\n}\n\n.settings-connection-table-header {\n  min-height: 30px;\n  padding: 0 10px;\n  color: var(--settings-muted);\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 16px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  background: var(--settings-surface);\n  border-bottom: 1px solid var(--settings-divider);\n}\n\n.settings-connection-rows > .settings-connection-row,\n.settings-connection-rows > .settings-connection-block {\n  border-bottom: 1px solid var(--settings-divider);\n}\n\n.settings-connection-rows > .settings-connection-row:last-child,\n.settings-connection-rows > .settings-connection-block:last-child {\n  border-bottom: 0;\n}\n\n.settings-connection-row {\n  min-height: 52px;\n  padding: 8px 10px;\n  cursor: pointer;\n}\n\n.settings-connection-row:hover {\n  background: var(--settings-hover);\n}\n\n.settings-connection-row[data-connection-selected="true"] {\n  background: var(--settings-surface);\n}\n\n.settings-connection-row__identity,\n.settings-connection-inspector__identity {\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  gap: 8px;\n  color: var(--settings-text);\n}\n\n.settings-connection-row__identity strong,\n.settings-connection-inspector__identity strong {\n  min-width: 0;\n  overflow-wrap: anywhere;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 18px;\n}\n\n.settings-connection-row__mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  flex: none;\n  color: var(--settings-mark);\n  font-size: 10px;\n  font-weight: 700;\n  background: var(--settings-surface-strong);\n  border-radius: 7px;\n}\n\n.settings-connection-row__mark--logo {\n  color: var(--settings-text);\n  background: transparent;\n}\n\n.settings-connection-row__mark--logo > img,\n.settings-connection-row__mark--logo > svg {\n  display: block;\n  max-width: 18px;\n  max-height: 18px;\n}\n\n.settings-connection-table-header > :last-child {\n  text-align: end;\n}\n\n.settings-connection-row__status {\n  display: inline-flex;\n  align-items: center;\n  width: fit-content;\n  max-width: 100%;\n  gap: 6px;\n  color: var(--settings-muted);\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 18px;\n}\n\n.settings-connection-row__status::before {\n  width: 6px;\n  height: 6px;\n  flex: none;\n  content: "";\n  background: currentColor;\n  border-radius: 50%;\n}\n\n.settings-connection-row__status[data-connection-tone="ready"] {\n  color: var(--settings-success);\n}\n\n.settings-connection-row__status[data-connection-tone="checking"] {\n  color: var(--settings-warning);\n}\n\n.settings-connection-row__status[data-connection-tone="setup"] {\n  color: var(--settings-muted);\n}\n\n.settings-connection-row__status[data-connection-tone="setup"]::before {\n  background: transparent;\n  border: 1.5px solid currentColor;\n}\n\n.settings-connection-row__status[data-connection-tone="failed"] {\n  color: var(--settings-danger);\n}\n\n.settings-connection-row__action {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  min-width: 0;\n  gap: 4px;\n}\n\n.settings-connection-row__handle {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  color: var(--settings-muted);\n  cursor: grab;\n  opacity: 0.6;\n}\n\n.settings-connection-row__handle:hover {\n  opacity: 1;\n}\n\n.settings-connection-row[draggable="true"] {\n  cursor: grab;\n}\n\n.settings-connection-row[data-connection-dragging="true"] {\n  opacity: 0.4;\n}\n\n.settings-connection-row[data-connection-drop-indicator="before"] {\n  box-shadow: inset 0 2px 0 0 var(--settings-focus);\n}\n\n.settings-connection-row[data-connection-drop-indicator="after"] {\n  box-shadow: inset 0 -2px 0 0 var(--settings-focus);\n}\n\n.settings-connection-inline-detail {\n  display: grid;\n  gap: 12px;\n  margin-top: 2px;\n  padding: 14px 12px 16px;\n  border-top: 1px solid var(--settings-divider);\n  background: var(--settings-inset);\n}\n\n.settings-connection-group-divider {\n  padding: 10px 12px 6px;\n  color: var(--settings-muted);\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 16px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  /* No border-top here: the row immediately above already carries its own\n     border-bottom (it is no longer :last-child once this divider follows\n     it), so adding one here would double the separator line. */\n}\n\n.settings-connection-group-divider[data-connection-drag-over="true"] {\n  color: var(--settings-focus);\n  background: rgb(51 156 255 / 8%);\n  border-radius: 6px;\n}\n\n.settings-connection-group-more[data-connection-drag-over="true"] {\n  background: rgb(51 156 255 / 8%);\n}\n\n.settings-connection-group-hint {\n  display: grid;\n  gap: 3px;\n  margin: 0 12px 12px;\n  padding: 14px 16px;\n  text-align: center;\n  border: 1.5px dashed var(--settings-border);\n  border-radius: 10px;\n}\n\n.settings-connection-group-more[data-connection-drag-over="true"] .settings-connection-group-hint {\n  border-color: var(--settings-focus);\n}\n\n.settings-connection-group-hint strong {\n  color: var(--settings-text);\n  font-size: 12.5px;\n  font-weight: 500;\n  line-height: 18px;\n}\n\n.settings-connection-group-hint span {\n  color: var(--settings-muted);\n  font-size: 12px;\n  line-height: 17px;\n}\n\n.settings-connection-group-reset {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  gap: 6px;\n  padding: 10px 12px;\n  color: var(--settings-muted);\n  font: inherit;\n  font-size: 12px;\n  text-align: left;\n  background: transparent;\n  border: 0;\n  border-top: 1px solid var(--settings-divider);\n  cursor: pointer;\n}\n\n.settings-connection-group-reset:hover {\n  color: var(--settings-text);\n  background: var(--settings-hover);\n}\n\n.settings-connection-install-link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  padding: 0;\n  color: var(--settings-focus);\n  font: inherit;\n  text-decoration: none;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 7px;\n  cursor: pointer;\n}\n\n.settings-connection-install-link:hover,\n.settings-connection-install-link:focus-visible {\n  color: var(--settings-focus);\n  background: var(--settings-active);\n  border-color: var(--settings-border);\n}\n\n.settings-connection-view-error {\n  padding: 4px 7px;\n  color: var(--settings-danger);\n  font: inherit;\n  font-size: 11px;\n  line-height: 18px;\n  background: transparent;\n  border: 0;\n  border-radius: 6px;\n  cursor: pointer;\n}\n\n.settings-connection-view-error:hover {\n  color: var(--settings-danger);\n  background: var(--settings-danger-bg);\n}\n\n.settings-connection-inspector {\n  position: sticky;\n  top: 18px;\n}\n\n.settings-connection-inspector__header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  min-width: 0;\n  gap: 10px;\n  padding: 12px;\n  border-bottom: 1px solid var(--settings-divider);\n}\n\n.settings-connection-inspector__body {\n  display: grid;\n  min-width: 0;\n  gap: 12px;\n  padding: 12px;\n}\n\n.settings-connection-install-callout {\n  display: grid;\n  grid-template-columns: 28px minmax(0, 1fr);\n  gap: 9px;\n  padding: 11px;\n  background: var(--settings-surface);\n  border: 0;\n  border-radius: 8px;\n}\n\n.settings-connection-install-callout__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  color: var(--settings-focus);\n  background: var(--settings-active);\n  border-radius: 7px;\n}\n\n.settings-connection-install-callout strong,\n.settings-connection-error-summary strong,\n.settings-connection-state-summary strong {\n  display: block;\n  margin: 0 0 4px;\n  color: var(--settings-text);\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 18px;\n}\n\n.settings-connection-install-callout p,\n.settings-connection-error-summary p,\n.settings-connection-state-summary p,\n.settings-connection-issue-note {\n  margin: 0;\n  color: var(--settings-muted);\n  font-size: 11px;\n  line-height: 16px;\n}\n\n.settings-connection-install-command {\n  display: grid;\n  gap: 4px;\n  margin-top: 8px;\n}\n\n.settings-connection-install-command span {\n  color: var(--settings-muted);\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 14px;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n.settings-connection-install-command code {\n  display: block;\n  min-width: 0;\n  overflow-wrap: anywhere;\n  color: var(--settings-text);\n  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;\n  font-size: 11px;\n  line-height: 16px;\n  white-space: pre-wrap;\n}\n\n.settings-connection-install-actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 8px;\n}\n\n.settings-connection-copy-prompt {\n  position: relative;\n}\n\n.settings-connection-copy-prompt__tooltip {\n  position: absolute;\n  z-index: 4;\n  bottom: calc(100% + 6px);\n  left: 0;\n  width: max-content;\n  max-width: min(360px, 72vw);\n  max-height: 180px;\n  overflow: auto;\n  padding: 8px 10px;\n  color: var(--settings-text);\n  font-size: 11px;\n  line-height: 16px;\n  white-space: pre-wrap;\n  text-align: left;\n  background: var(--settings-elevated);\n  border: 1px solid var(--settings-border);\n  border-radius: 8px;\n  box-shadow: 0 10px 24px rgb(0 0 0 / 22%);\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  transition: opacity 120ms ease;\n}\n\n.settings-connection-copy-prompt:hover .settings-connection-copy-prompt__tooltip,\n.settings-connection-copy-prompt:focus-within .settings-connection-copy-prompt__tooltip {\n  opacity: 1;\n  visibility: visible;\n}\n\n.settings-connection-error-summary {\n  padding: 13px 14px;\n  color: var(--settings-danger);\n  background: var(--settings-danger-bg);\n  border: 1px solid var(--settings-danger-border);\n  border-radius: 10px;\n}\n\n.settings-connection-error-metadata {\n  display: grid;\n  gap: 7px;\n  padding: 12px;\n  background: var(--settings-inset);\n  border: 1px solid var(--settings-border);\n  border-radius: 9px;\n}\n\n.settings-connection-detail-line {\n  display: grid;\n  grid-template-columns: 92px minmax(0, 1fr);\n  gap: 10px;\n  min-width: 0;\n  color: var(--settings-muted);\n  font-size: 10px;\n  line-height: 16px;\n}\n\n.settings-connection-detail-line code {\n  min-width: 0;\n  overflow-wrap: anywhere;\n  color: var(--settings-text);\n  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;\n  white-space: pre-wrap;\n}\n\n.settings-connection-error-log-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n}\n\n.settings-connection-error-log-header strong {\n  color: var(--settings-text);\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.settings-connection-error-log-header .settings-command-button {\n  min-height: 30px;\n  padding: 5px 9px;\n  font-size: 11px;\n}\n\n.settings-connection-stderr {\n  max-height: 220px;\n  min-width: 0;\n  margin: 0;\n  padding: 11px;\n  overflow: auto;\n  color: var(--settings-text);\n  font:\n    10px/16px ui-monospace,\n    "SFMono-Regular",\n    Consolas,\n    "Liberation Mono",\n    monospace;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  background: var(--settings-inset);\n  border: 1px solid var(--settings-border);\n  border-radius: 9px;\n}\n\n.settings-connection-error-actions {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: 8px;\n}\n\n.settings-connection-error-actions .settings-command-button {\n  width: 100%;\n}\n\n.settings-connection-issue-note {\n  margin-top: -4px;\n}\n\n.settings-connection-state-summary {\n  padding: 14px;\n  background: var(--settings-surface);\n  border: 1px solid var(--settings-border);\n  border-radius: 10px;\n}\n\n.settings-empty {\n  display: flex;\n  align-items: center;\n  min-height: 72px;\n  padding: 12px 16px;\n}\n\n.settings-empty > div {\n  display: grid;\n  min-width: 0;\n  gap: 2px;\n}\n\n.settings-empty strong {\n  color: var(--settings-text);\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 19px;\n}\n\n.settings-empty span {\n  color: var(--settings-muted);\n  font-size: 13px;\n  line-height: 19px;\n}\n\n.settings-about-page {\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n  box-sizing: border-box;\n  min-height: min(620px, calc(100vh - 200px));\n  max-width: 720px;\n}\n\n.settings-about-page > .settings-section-label {\n  padding-bottom: 10px;\n}\n\n.settings-about-panel {\n  display: grid;\n  gap: 18px;\n  padding: 24px;\n  background: var(--settings-panel);\n  border: 1px solid var(--settings-border);\n  border-radius: 12px;\n}\n\n.settings-about-product {\n  color: var(--settings-text);\n  font-size: 24px;\n  font-weight: 700;\n  line-height: 32px;\n}\n\n.settings-about-tagline {\n  color: var(--settings-text);\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 24px;\n}\n\n.settings-about-copy {\n  display: grid;\n  max-width: 660px;\n  gap: 12px;\n}\n\n.settings-about-lead,\n.settings-about-extension,\n.settings-about-closing p,\n.settings-about-copy p {\n  margin: 0;\n  color: var(--settings-muted);\n  font-size: 13px;\n  line-height: 21px;\n}\n\n.settings-about-lead {\n  color: var(--settings-text);\n  font-weight: 500;\n}\n\n.settings-about-agents {\n  display: grid;\n  gap: 10px;\n  margin: 2px 0;\n  padding: 0;\n  list-style: none;\n}\n\n.settings-about-agent {\n  display: grid;\n  gap: 4px;\n  padding-left: 2px;\n}\n\n.settings-about-agent-name {\n  color: var(--settings-text);\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 18px;\n}\n\n.settings-about-agent-name::before {\n  content: "\xB7 ";\n  color: var(--settings-muted);\n  font-weight: 600;\n}\n\n.settings-about-agent-description {\n  display: block;\n  padding-left: 0.85em;\n  color: var(--settings-muted);\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 18px;\n}\n\n.settings-about-closing {\n  display: grid;\n  gap: 8px;\n}\n\n.settings-about-repository {\n  gap: 10px;\n}\n\n.settings-about-open-source {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 0.35em;\n  margin: 0;\n  color: var(--settings-muted);\n  font-size: 13px;\n  line-height: 21px;\n}\n\n.settings-about-repository p {\n  margin: 0;\n  color: var(--settings-muted);\n  font-size: 13px;\n  line-height: 21px;\n}\n\n.settings-about-star-callout {\n  margin: 4px 0 0;\n  color: var(--settings-warning);\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 22px;\n}\n\n.settings-about-repository-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  color: #7cb8ff;\n  font-weight: 600;\n  line-height: 1;\n  text-decoration: none;\n}\n\n.settings-about-repository-link .codexhost-settings-icon {\n  display: block;\n  flex: none;\n}\n\n.settings-about-repository-link:hover {\n  text-decoration: underline;\n}\n\n.settings-about-brand {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  margin-top: auto;\n  padding-top: 12px;\n  color: inherit;\n  opacity: 0.9;\n  text-decoration: none;\n  transition: opacity 160ms ease;\n}\n\n.settings-about-brand:hover {\n  opacity: 1;\n}\n\n.settings-about-brand-video {\n  width: 40px;\n  height: 40px;\n  flex: none;\n  overflow: hidden;\n  object-fit: cover;\n  border-radius: 999px;\n  box-shadow: 0 1px 2px rgb(0 0 0 / 18%);\n}\n\n.settings-about-brand-copy {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 2px;\n}\n\n.settings-about-brand-name {\n  color: var(--settings-text);\n  font-size: 14px;\n  font-weight: 800;\n  letter-spacing: 0.18em;\n  line-height: 18px;\n}\n\n.settings-about-brand-tagline {\n  color: var(--settings-muted);\n  font-size: 12px;\n  font-weight: 500;\n  letter-spacing: 0.18em;\n  line-height: 16px;\n}\n\n.settings-page-error {\n  padding: 16px;\n  color: var(--settings-text);\n  font-size: 13px;\n  background: var(--settings-panel);\n  border: 1px solid var(--settings-border);\n  border-radius: 20px;\n}\n\n.settings-update-metadata {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 24px;\n  margin-bottom: 24px;\n  padding: 0 0 20px;\n  border-bottom: 1px solid var(--settings-divider);\n}\n\n.settings-update-metadata__item {\n  display: grid;\n  min-width: 0;\n  gap: 4px;\n}\n\n.settings-update-metadata__item span {\n  color: var(--settings-muted);\n  font-size: 12px;\n  line-height: 18px;\n}\n\n.settings-update-metadata__item strong {\n  min-width: 0;\n  overflow-wrap: anywhere;\n  color: var(--settings-text);\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 22px;\n}\n\n/* The only emphasis on this screen: a latest version newer than the installed one. */\n.settings-update-metadata__value--newer {\n  color: var(--settings-focus);\n}\n\n.settings-update-panel {\n  display: grid;\n  gap: 12px;\n  padding: 20px;\n  color: var(--settings-text);\n  background: var(--settings-panel);\n  border: 1px solid var(--settings-border);\n  border-radius: 8px;\n}\n\n/* Soft status copy and the Update action should not sit in a framed card. */\n.settings-update-panel[data-update-state="unavailable"],\n.settings-update-panel[data-update-state="failed"],\n.settings-update-panel[data-update-state="error"],\n.settings-update-panel[data-update-state="available"] {\n  padding: 4px 0 0;\n  border: 0;\n  border-radius: 0;\n}\n\n.settings-update-panel__status-row {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 8px;\n  min-width: 0;\n}\n\n.settings-update-panel__status-row .settings-update-actions {\n  flex: none;\n}\n\n.settings-update-panel__status-row .settings-update-panel__head {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.settings-update-panel__head {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  gap: 8px;\n}\n\n.settings-update-panel__head .codexhost-settings-icon {\n  color: var(--settings-muted);\n}\n\n.settings-update-panel[data-update-state="available"]\n  .settings-update-panel__head\n  .codexhost-settings-icon,\n.settings-update-panel[data-update-state="downloading"]\n  .settings-update-panel__head\n  .codexhost-settings-icon,\n.settings-update-panel[data-update-state="installing"]\n  .settings-update-panel__head\n  .codexhost-settings-icon,\n.settings-update-panel[data-update-state="restarting"]\n  .settings-update-panel__head\n  .codexhost-settings-icon {\n  color: var(--settings-focus);\n}\n\n.settings-update-panel[data-update-state="current"]\n  .settings-update-panel__head\n  .codexhost-settings-icon {\n  color: var(--settings-success);\n}\n\n.settings-update-panel[data-update-state="failed"]\n  .settings-update-panel__head\n  .codexhost-settings-icon,\n.settings-update-panel[data-update-state="error"]\n  .settings-update-panel__head\n  .codexhost-settings-icon {\n  color: var(--settings-danger);\n}\n\n.settings-update-panel[data-update-state="unavailable"]\n  .settings-update-panel__head\n  .codexhost-settings-icon {\n  color: var(--settings-muted);\n}\n\n.settings-update-panel__title {\n  min-width: 0;\n  overflow-wrap: anywhere;\n  color: var(--settings-text);\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 22px;\n}\n\n.settings-update-summary,\n.settings-update-error {\n  margin: 0;\n  overflow-wrap: anywhere;\n  font-size: 13px;\n  line-height: 20px;\n}\n\n.settings-update-summary {\n  color: var(--settings-muted);\n}\n\n.settings-update-error {\n  color: var(--settings-danger);\n}\n\n.settings-update-progress {\n  width: 100%;\n  height: 8px;\n  accent-color: var(--settings-focus);\n}\n\n.settings-update-progress-detail {\n  color: var(--settings-muted);\n  font-size: 12px;\n  line-height: 18px;\n}\n\n/* Release notes scroll with the page; a scroller inside a scroller traps the wheel. */\n.settings-update-notes-section {\n  min-width: 0;\n  margin-top: 24px;\n  padding-top: 24px;\n  border-top: 1px solid var(--settings-divider);\n}\n\n.settings-update-notes-section:empty {\n  display: none;\n}\n\n.settings-update-notes {\n  display: grid;\n  min-width: 0;\n  gap: 12px;\n  color: var(--settings-muted);\n  font-size: 14px;\n  line-height: 22px;\n  overflow-wrap: anywhere;\n}\n\n.settings-update-notes > :first-child {\n  margin-top: 0;\n}\n\n.settings-update-notes > :last-child {\n  margin-bottom: 0;\n}\n\n.settings-update-notes h1,\n.settings-update-notes h2,\n.settings-update-notes h3,\n.settings-update-notes h4,\n.settings-update-notes h5,\n.settings-update-notes h6 {\n  margin: 6px 0 0;\n  color: var(--settings-text);\n  font-weight: 600;\n}\n\n.settings-update-notes h1 {\n  font-size: 18px;\n  line-height: 26px;\n}\n\n.settings-update-notes h2 {\n  font-size: 17px;\n  line-height: 24px;\n}\n\n.settings-update-notes h3,\n.settings-update-notes h4,\n.settings-update-notes h5,\n.settings-update-notes h6 {\n  font-size: 14px;\n  line-height: 22px;\n}\n\n.settings-update-notes p,\n.settings-update-notes ul,\n.settings-update-notes ol,\n.settings-update-notes pre,\n.settings-update-notes blockquote {\n  margin: 0;\n}\n\n.settings-update-notes ul,\n.settings-update-notes ol {\n  padding-left: 24px;\n}\n\n.settings-update-notes li {\n  padding-left: 4px;\n}\n\n.settings-update-notes li::marker {\n  color: var(--settings-muted);\n  font-size: 0.85em;\n}\n\n.settings-update-notes li + li {\n  margin-top: 14px;\n}\n\n.settings-update-notes .release-note-translation {\n  display: block;\n  margin-top: 3px;\n  color: var(--settings-muted);\n  font-size: 13px;\n  line-height: 20px;\n}\n\n.settings-update-notes blockquote {\n  padding: 8px 12px;\n  color: var(--settings-muted);\n  border-left: 3px solid var(--settings-focus);\n  background: var(--settings-surface);\n}\n\n.settings-update-notes hr {\n  width: 100%;\n  margin: 2px 0;\n  border: 0;\n  border-top: 1px solid var(--settings-divider);\n}\n\n.settings-update-notes strong {\n  color: var(--settings-text);\n  font-weight: 600;\n}\n\n.settings-update-notes a {\n  color: var(--settings-focus);\n  text-decoration: none;\n}\n\n.settings-update-notes a:hover {\n  text-decoration: underline;\n}\n\n.settings-update-notes code {\n  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;\n  font-size: 12px;\n}\n\n.settings-update-notes :not(pre) > code {\n  padding: 1px 5px;\n  background: var(--settings-surface-strong);\n  border-radius: 4px;\n}\n\n.settings-update-notes pre {\n  min-width: 0;\n  max-width: 100%;\n  padding: 10px 12px;\n  overflow-x: auto;\n  overflow-y: hidden;\n  background: var(--settings-inset);\n  border-radius: 6px;\n}\n\n.settings-update-notes pre code {\n  line-height: 18px;\n  white-space: pre-wrap;\n}\n\n/* Manual update sits directly under the status panel, not behind a disclosure:\n   automatic updates can fail for machine-local reasons and this is the way out. */\n.settings-update-controls {\n  display: grid;\n  min-width: 0;\n  gap: 10px;\n  margin-top: 24px;\n}\n\n.settings-update-manual-title {\n  color: var(--settings-text);\n  font-size: 15px;\n  font-weight: 600;\n  line-height: 22px;\n}\n\n.settings-update-manual {\n  display: grid;\n  min-width: 0;\n  gap: 8px;\n}\n\n.settings-update-manual[hidden] {\n  display: none;\n}\n\n.settings-update-manual-description {\n  margin: 0;\n  color: var(--settings-muted);\n  font-size: 12px;\n  line-height: 18px;\n}\n\n.settings-update-manual-description.is-fallback {\n  color: var(--settings-danger);\n}\n\n.settings-update-command {\n  display: flex;\n  align-items: stretch;\n  min-width: 0;\n  overflow: hidden;\n  border: 1px solid var(--settings-border);\n  border-radius: 6px;\n}\n\n.settings-update-command code {\n  min-width: 0;\n  flex: 1;\n  padding: 9px 12px;\n  overflow-x: auto;\n  color: var(--settings-text);\n  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;\n  font-size: 12px;\n  line-height: 20px;\n  white-space: nowrap;\n}\n\n.settings-update-command__copy {\n  display: inline-flex;\n  align-items: center;\n  flex: none;\n  gap: 6px;\n  padding: 0 12px;\n  color: var(--settings-muted);\n  font-size: 12px;\n  background: transparent;\n  border: 0;\n  border-left: 1px solid var(--settings-border);\n  cursor: pointer;\n}\n\n.settings-update-command__copy:hover {\n  color: var(--settings-text);\n  background: var(--settings-hover);\n}\n\n.settings-update-command__copy:focus-visible {\n  outline: 2px solid var(--settings-focus);\n  outline-offset: -2px;\n}\n\n.settings-update-actions {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.settings-command-button,\n.settings-update-link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: max-content;\n  max-width: 100%;\n  min-height: 30px;\n  gap: 6px;\n  padding: 5px 10px;\n  white-space: nowrap;\n  color: var(--settings-primary-text);\n  font: inherit;\n  font-size: 12px;\n  text-decoration: none;\n  background: var(--settings-primary);\n  border: 1px solid var(--settings-primary);\n  border-radius: 7px;\n  cursor: pointer;\n}\n\n.settings-command-button--secondary,\n.settings-update-link {\n  color: var(--settings-muted);\n  background: transparent;\n  border-color: var(--settings-border);\n}\n\n.settings-command-button--secondary .codexhost-settings-icon,\n.settings-update-link .codexhost-settings-icon {\n  color: var(--settings-muted);\n}\n\n.settings-command-button:hover:not(.settings-command-button--secondary) {\n  filter: brightness(1.08);\n}\n\n.settings-command-button--danger {\n  color: var(--settings-danger);\n}\n\n.settings-command-button--danger:hover:not(:disabled) {\n  color: #fecaca;\n  background: var(--settings-danger-bg);\n  border-color: var(--settings-danger-border);\n}\n\n.settings-command-button--secondary:hover,\n.settings-update-link:hover {\n  color: var(--settings-text);\n  background: var(--settings-hover);\n}\n\n.settings-command-button--secondary:hover .codexhost-settings-icon,\n.settings-update-link:hover .codexhost-settings-icon {\n  color: var(--settings-text);\n}\n\n.settings-command-button:disabled,\n.settings-command-button[aria-disabled="true"] {\n  opacity: 0.55;\n  cursor: not-allowed;\n  filter: none;\n}\n\n.settings-command-button:focus-visible,\n.settings-update-link:focus-visible {\n  outline: 2px solid var(--settings-focus);\n  outline-offset: 2px;\n}\n\n.settings-visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.settings-session-import-content {\n  display: grid;\n  min-width: 0;\n  gap: 12px;\n  margin-top: 16px;\n}\n\n.settings-session-import-list {\n  display: grid;\n  min-width: 0;\n  overflow: hidden;\n  background: var(--settings-surface);\n  border: 1px solid var(--settings-border);\n  border-radius: 12px;\n}\n\n.settings-session-import-row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: center;\n  min-width: 0;\n  gap: 16px;\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--settings-divider);\n}\n\n.settings-session-import-row:last-child {\n  border-bottom: 0;\n}\n\n.settings-session-import-row__copy {\n  display: grid;\n  min-width: 0;\n  gap: 4px;\n}\n\n.settings-session-import-row__copy strong {\n  color: var(--settings-text);\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px;\n}\n\n.settings-session-import-row__copy span,\n.settings-session-import-row__cwd {\n  min-width: 0;\n  overflow-wrap: anywhere;\n  color: var(--settings-muted);\n  font-size: 12px;\n  line-height: 18px;\n}\n\n.settings-session-import-row__cwd {\n  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;\n}\n\n.settings-session-import-row__action {\n  display: flex;\n  align-items: center;\n  flex: none;\n  gap: 8px;\n}\n\n.settings-session-import-running {\n  color: #f5c542;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 18px;\n  white-space: nowrap;\n}\n\n.settings-session-import-recovery {\n  display: grid;\n  min-width: 0;\n  gap: 12px;\n  padding: 16px;\n  background: var(--settings-surface);\n  border: 1px solid var(--settings-border);\n  border-radius: 12px;\n}\n\n.settings-session-import-recovery__copy {\n  display: grid;\n  gap: 6px;\n}\n\n.settings-session-import-recovery__copy strong {\n  color: var(--settings-text);\n  font-size: 15px;\n  font-weight: 600;\n  line-height: 22px;\n}\n\n.settings-session-import-recovery__copy p {\n  margin: 0;\n  color: var(--settings-muted);\n  font-size: 13px;\n  line-height: 20px;\n}\n\n.settings-session-import-recovery__path {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  gap: 8px;\n}\n\n.settings-session-import-recovery__path code {\n  min-width: 0;\n  flex: 1;\n  overflow-wrap: anywhere;\n  color: var(--settings-text);\n  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;\n  font-size: 12px;\n  line-height: 18px;\n}\n\n.codexhost-settings-icon {\n  display: block;\n  flex: none;\n  stroke: currentColor;\n}\n\n@media (max-width: 720px) {\n  .codexhost-settings-dialog {\n    width: calc(100vw - 16px);\n    height: calc(100vh - 16px);\n    border-radius: 10px;\n  }\n\n  .settings-layout {\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-rows: auto minmax(0, 1fr);\n  }\n\n  .settings-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--settings-border);\n  }\n\n  .settings-header {\n    height: 56px;\n    padding-inline: 14px;\n  }\n\n  .settings-sidebar {\n    padding-top: 20px;\n  }\n\n  .settings-nav {\n    flex: none;\n    flex-direction: row;\n    gap: 4px;\n    padding: 7px 8px 8px;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n\n  .settings-nav-section-label {\n    display: none;\n  }\n\n  .settings-nav-button {\n    width: auto;\n    min-width: max-content;\n    min-height: 34px;\n    grid-template-columns: 16px auto;\n    border-radius: 10px;\n  }\n\n  .settings-page__content {\n    width: calc(100% - 40px);\n  }\n\n  .settings-page__content {\n    padding-top: 32px;\n    padding-bottom: 32px;\n  }\n\n  .settings-section-label {\n    padding-bottom: 20px;\n    font-size: 20px;\n    line-height: 26px;\n  }\n\n  .settings-update-metadata {\n    grid-template-columns: minmax(0, 1fr);\n    gap: 16px;\n  }\n\n  .settings-status-row {\n    grid-template-columns: minmax(0, 1fr) auto;\n    gap: 16px;\n  }\n\n  .settings-account-header,\n  .settings-connection-page-header {\n    flex-direction: column;\n  }\n\n  .settings-account-header > .settings-command-button,\n  .settings-connection-page-header > .settings-command-button {\n    width: 100%;\n  }\n\n  .settings-session-import-row {\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  .settings-session-import-row__action {\n    justify-content: flex-start;\n    flex-wrap: wrap;\n  }\n\n  .settings-status-row__detail {\n    grid-column: 1 / -1;\n    margin: -8px 0 0 58px;\n  }\n}\n\n@media (forced-colors: active) {\n  :host,\n  :host([data-theme="light"]),\n  :host([data-theme="dark"]) {\n    --settings-bg: Canvas;\n    --settings-sidebar: Canvas;\n    --settings-panel: Canvas;\n    --settings-surface: Canvas;\n    --settings-surface-hover: Highlight;\n    --settings-inset: Canvas;\n    --settings-text: CanvasText;\n    --settings-muted: GrayText;\n    --settings-subtle: GrayText;\n    --settings-border: ButtonBorder;\n    --settings-divider: ButtonBorder;\n    --settings-hover: Highlight;\n    --settings-active: Highlight;\n    --settings-focus: Highlight;\n    --settings-elevated: Canvas;\n    --settings-surface-strong: Canvas;\n    --settings-mark: CanvasText;\n    --settings-primary: ButtonFace;\n    --settings-primary-hover: Highlight;\n    --settings-primary-text: ButtonText;\n    --settings-warning: CanvasText;\n    --settings-warning-bg: Canvas;\n    --settings-warning-border: ButtonBorder;\n    --settings-danger: CanvasText;\n    --settings-danger-bg: Canvas;\n    --settings-danger-border: ButtonBorder;\n    --settings-success: CanvasText;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    scroll-behavior: auto !important;\n    transition-duration: 0s !important;\n  }\n}\n';
 
   // src/settings/accounts.css
-  var accounts_default = '.settings-harness-accounts {\n  margin-top: 32px;\n}\n\n.settings-harness-accounts__title {\n  margin: 0 0 16px;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.settings-harness-account__identity {\n  min-width: 0;\n}\n\n.settings-harness-account__identity > .settings-account-email {\n  display: block;\n  max-width: 24ch;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.settings-harness-account__logo {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  flex: none;\n}\n\n.settings-harness-account {\n  display: grid;\n  grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);\n  align-items: center;\n  gap: 24px;\n  padding: 24px;\n}\n\n.settings-harness-account + .settings-harness-account {\n  border-top: 1px solid var(--settings-border);\n}\n\n.settings-harness-account > div {\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n@media (max-width: 700px) {\n  .settings-harness-account {\n    grid-template-columns: minmax(0, 1fr);\n    padding: 16px;\n  }\n}\n\n.settings-account-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 20px;\n}\n\n.settings-account-header > :first-child {\n  min-width: 0;\n  flex: 1 1 auto;\n}\n\n.settings-account-header > .settings-command-button {\n  flex: none;\n  white-space: nowrap;\n}\n\n.settings-account-header .settings-section-label {\n  margin: 0;\n  padding: 0;\n  font-size: 27px;\n  line-height: 1.4;\n  font-weight: 650;\n  letter-spacing: -0.035em;\n}\n.settings-account-header .settings-page-description {\n  margin: 8px 0 0;\n  font-size: 13px;\n}\n\n.settings-account-status {\n  margin: 0;\n  color: var(--settings-muted);\n  font-size: 12px;\n}\n.settings-account-status:empty {\n  display: none;\n}\n\n.settings-account-help-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  margin-top: 20px;\n  flex-wrap: wrap;\n}\n.settings-account-task-hint {\n  display: flex;\n  align-items: flex-start;\n  gap: 9px;\n  margin: 0;\n  color: var(--settings-muted);\n  font-size: 12px;\n  flex: 1 1 280px;\n}\n.settings-account-task-hint svg {\n  flex: none;\n  margin-top: 1px;\n}\n.settings-account-help-button {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  padding: 8px 12px;\n  color: var(--settings-muted);\n  font-size: 12px;\n  background: transparent;\n  border: 0;\n  border-radius: 7px;\n  cursor: pointer;\n}\n.settings-account-help-button:hover {\n  color: var(--settings-text);\n  background: var(--settings-hover);\n}\n.settings-account-device-code-note {\n  margin: 12px 0 0;\n  font-size: 12px;\n  padding: 10px 12px;\n  color: var(--settings-warning);\n  background: var(--settings-warning-bg);\n  border: 1px solid var(--settings-warning-border);\n  border-radius: 8px;\n}\n\n.settings-account-toolbar {\n  margin-top: 27px;\n  padding: 18px 0;\n  border-top: 1px solid var(--settings-border);\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  flex-wrap: wrap;\n}\n.settings-account-count {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  white-space: nowrap;\n}\n.settings-account-count > :last-child {\n  color: var(--settings-muted);\n  font-variant-numeric: tabular-nums;\n}\n.settings-account-search {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--settings-muted);\n  margin-right: auto;\n  min-width: 0;\n  max-width: 100%;\n}\n.settings-account-search svg {\n  flex: none;\n}\n.settings-account-toolbar input {\n  min-width: 80px;\n  width: 150px;\n  max-width: 100%;\n  padding: 5px 0;\n  color: var(--settings-text);\n  background: transparent;\n  border: 0;\n  font-size: 13px;\n}\n.settings-account-toolbar input::placeholder {\n  color: var(--settings-muted);\n}\n.settings-account-display-controls {\n  display: flex;\n  padding: 3px;\n  border: 1px solid var(--settings-border);\n  border-radius: 7px;\n  background: var(--settings-inset);\n}\n.settings-account-display-controls button {\n  padding: 4px 10px;\n  color: var(--settings-muted);\n  background: transparent;\n  border: 0;\n  border-radius: 4px;\n  font-size: 12px;\n  cursor: pointer;\n}\n.settings-account-display-controls button:hover {\n  color: var(--settings-text);\n}\n.settings-account-display-controls button[aria-pressed="true"] {\n  color: var(--settings-text);\n  background: var(--settings-active);\n}\n\n.settings-account-list {\n  --account-border: light-dark(#e2e2e8, #36363b);\n  --account-muted: light-dark(#676773, #a5a5af);\n  border: 1px solid var(--account-border);\n  border-radius: 11px;\n  overflow: hidden;\n  container-type: inline-size;\n}\n.settings-account-table {\n  width: 100%;\n  table-layout: fixed;\n  border-collapse: collapse;\n  font-size: 12px;\n}\n.settings-account-table th {\n  padding: 13px 20px;\n  color: var(--account-muted);\n  background: light-dark(#f8f8fa, #202024);\n  font-size: 11px;\n  font-weight: 500;\n  text-align: left;\n}\n.settings-account-table th:nth-child(1) {\n  width: 32%;\n}\n.settings-account-table th:nth-child(2) {\n  width: 38%;\n}\n.settings-account-table th:nth-child(3) {\n  width: 12%;\n}\n.settings-account-table th:nth-child(4) {\n  width: 18%;\n  text-align: right;\n}\n.settings-account-table td {\n  padding: 19px 20px;\n  vertical-align: middle;\n  border-top: 1px solid var(--settings-divider);\n}\n.settings-account-row {\n  background: light-dark(#ffffff, #232326);\n}\n.settings-account-row:hover {\n  background: light-dark(#f7f7fa, #26262a);\n}\n.settings-account-row__person {\n  display: grid;\n  grid-template-columns: 34px minmax(0, 1fr);\n  align-items: center;\n  gap: 11px;\n  min-width: 0;\n}\n.settings-account-row__mark {\n  display: grid;\n  place-items: center;\n  width: 34px;\n  height: 34px;\n  color: light-dark(#67558d, #c3baff);\n  background: light-dark(#f0ecf7, #353044);\n  border: 1px solid light-dark(#d9d0e6, #4d435f);\n  border-radius: 10px;\n}\n.settings-account-row__identity {\n  min-width: 0;\n}\n.settings-account-title {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n.settings-account-email {\n  min-width: 0;\n  overflow: hidden;\n  font-size: 13px;\n  font-weight: 550;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.settings-account-metadata {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  gap: 7px;\n  margin-top: 4px;\n  color: var(--settings-muted);\n}\n.settings-account-domain {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.settings-account-plan-separator {\n  flex: none;\n}\n.settings-account-plan {\n  flex: none;\n  padding: 1px 6px;\n  color: var(--settings-muted);\n  border: 1px solid var(--settings-border);\n  border-radius: 5px;\n  font-size: 11px;\n  white-space: nowrap;\n}\n.settings-account-plan--highlighted {\n  color: light-dark(#654f91, #c8bfff);\n  background: light-dark(#f2edf9, #a99bff18);\n  border-color: light-dark(#d9ccea, #a99bff52);\n  font-weight: 600;\n}\n.settings-account-active {\n  flex: none;\n  padding: 2px 7px;\n  color: light-dark(#66548e, #bdb4ff);\n  background: light-dark(#f4f0fb, #aca0ff12);\n  border: 1px solid light-dark(#dfd5f1, #aca0ff24);\n  border-radius: 5px;\n  font-size: 11px;\n  white-space: nowrap;\n}\n\n.settings-account-usage {\n  display: grid;\n  gap: 14px;\n  max-width: 380px;\n}\n.settings-account-usage__meter {\n  display: grid;\n  grid-template-columns: 48px minmax(36px, 1fr) 96px;\n  align-items: center;\n  gap: 3px 10px;\n}\n:host([lang="zh-CN"]) .settings-account-usage__meter {\n  grid-template-columns: 48px minmax(36px, 1fr) 72px;\n}\n.settings-account-usage__meter--balance {\n  display: flex;\n  grid-template-columns: none;\n  justify-content: flex-start;\n  gap: 6px;\n}\n.settings-account-usage__balance {\n  display: inline-flex;\n  align-items: baseline;\n  gap: 4px;\n  font-size: 14px;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n\n.settings-account-usage__title {\n  color: light-dark(#5d5d68, #c3c3cd);\n  font-size: 12px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.settings-account-usage__percent {\n  display: flex;\n  align-items: baseline;\n  justify-content: flex-end;\n  gap: 4px;\n  font-size: 14px;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.settings-account-usage__value-label {\n  color: var(--settings-muted);\n  font-size: 11px;\n  font-weight: 400;\n}\n.settings-account-usage__percent--warn {\n  color: var(--settings-warning);\n}\n.settings-account-usage__percent--hot {\n  color: var(--settings-danger);\n}\n.settings-account-usage__bar {\n  height: 4px;\n  overflow: hidden;\n  background: light-dark(#e3e1e8, #3c3c43);\n  border-radius: 4px;\n}\n.settings-account-usage__bar > span {\n  display: block;\n  height: 100%;\n  background: light-dark(#81769e, #9993b8);\n  border-radius: inherit;\n}\n.settings-account-usage__bar--warn > span {\n  background: var(--settings-warning);\n}\n.settings-account-usage__bar--hot > span {\n  background: var(--settings-danger);\n}\n.settings-account-usage__sub {\n  grid-column: 2 / -1;\n  color: var(--account-muted);\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n  overflow-wrap: anywhere;\n}\n.settings-account-usage__message,\n.settings-account-unknown {\n  color: var(--settings-muted);\n}\n.settings-account-usage > button {\n  justify-self: start;\n}\n.settings-account-actions {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 4px;\n  flex-wrap: wrap;\n}\n.settings-account-action {\n  padding: 8px 10px;\n  min-height: 36px;\n  font-size: 12px;\n  color: var(--settings-text);\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 7px;\n  white-space: nowrap;\n  cursor: pointer;\n}\n.settings-account-action:hover {\n  background: var(--settings-hover);\n}\n.settings-account-action:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n.settings-account-actions .settings-account-delete {\n  color: var(--settings-muted);\n}\n.settings-account-actions .settings-account-delete:hover,\n.settings-account-actions .settings-account-delete:focus-visible {\n  color: var(--settings-danger);\n  background: var(--settings-danger-bg);\n}\n.settings-account-mobile-label {\n  display: none;\n}\n.settings-account-reset-summary {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  min-height: 32px;\n  padding: 3px 0;\n  font-size: 12px;\n  white-space: nowrap;\n  color: var(--settings-text);\n  background: transparent;\n  border: 0;\n  border-radius: 5px;\n  cursor: pointer;\n}\n.settings-account-reset-summary:hover {\n  background: var(--settings-hover);\n}\n.settings-account-reset-summary[aria-expanded="true"] > svg:last-child {\n  transform: rotate(90deg);\n}\n.settings-account-details-row > td {\n  background: var(--settings-inset);\n}\n.settings-account-reset-details {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n.settings-account-reset-details strong {\n  font-size: 12px;\n}\n.settings-account-reset-expiry {\n  margin: 6px 0;\n  color: var(--settings-muted);\n  font-size: 11px;\n}\n.settings-account-reset-expiry.is-warn {\n  color: var(--settings-warning);\n}\n.settings-account-reset-expiry.is-hot {\n  color: var(--settings-danger);\n}\n.settings-account-reset-list {\n  margin: 8px 0 0;\n  padding: 0;\n  list-style: none;\n  color: var(--settings-muted);\n  font-size: 11px;\n}\n.settings-account-reset-list li + li {\n  margin-top: 4px;\n}\n.settings-account-empty {\n  text-align: center;\n  color: var(--settings-muted);\n}\n.settings-account-verification {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n  color: var(--settings-muted);\n}\n.settings-account-verification a {\n  color: var(--settings-focus);\n  overflow-wrap: anywhere;\n}\n.settings-account-verification code {\n  padding: 5px 8px;\n  color: var(--settings-text);\n  font-size: 15px;\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  background: var(--settings-inset);\n  border-radius: 6px;\n}\n.settings-account-list :focus-visible,\n.settings-account-toolbar :focus-visible,\n.settings-account-help-button:focus-visible {\n  outline: 2px solid var(--settings-focus);\n  outline-offset: -2px;\n}\n\n@container (min-width: 611px) and (max-width: 800px) {\n  .settings-account-table th,\n  .settings-account-table td {\n    padding-left: 12px;\n    padding-right: 12px;\n  }\n  .settings-account-table th:nth-child(1) {\n    width: 30%;\n  }\n  .settings-account-table th:nth-child(2) {\n    width: 37%;\n  }\n  .settings-account-table th:nth-child(4) {\n    width: 21%;\n  }\n}\n\n@container (max-width: 610px) {\n  .settings-account-table,\n  .settings-account-table tbody {\n    display: block;\n  }\n  .settings-account-table thead {\n    display: none;\n  }\n  .settings-account-row {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    padding: 16px;\n    gap: 12px;\n    border-bottom: 1px solid var(--settings-divider);\n  }\n  .settings-account-table .settings-account-row > td {\n    padding: 0;\n    border: 0;\n  }\n  .settings-account-row > td:nth-child(1),\n  .settings-account-row > td:nth-child(2) {\n    grid-column: 1 / -1;\n  }\n  .settings-account-row > td:nth-child(3) {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n  .settings-account-mobile-label {\n    display: inline;\n    color: var(--settings-muted);\n    font-size: 11px;\n  }\n  .settings-account-usage {\n    max-width: none;\n  }\n  .settings-account-table tr:not(.settings-account-row),\n  .settings-account-table tr:not(.settings-account-row) > td {\n    display: block;\n  }\n}\n\n@media (forced-colors: active) {\n  .settings-account-usage__bar {\n    border: 1px solid CanvasText;\n  }\n  .settings-account-usage__bar > span {\n    background: Highlight;\n  }\n}\n';
+  var accounts_default = '.settings-harness-account__logo {\n  display: grid;\n  place-items: center;\n  width: 34px;\n  height: 34px;\n}\n\n.settings-account-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 20px;\n}\n\n.settings-account-header > :first-child {\n  min-width: 0;\n  flex: 1 1 auto;\n}\n\n.settings-account-header > .settings-command-button {\n  flex: none;\n  white-space: nowrap;\n  margin-top: 0;\n  min-height: 36px;\n  padding: 8px 12px;\n  border-radius: 7px;\n}\n\n.settings-account-header .settings-section-label {\n  margin: 0;\n  padding: 0;\n  font-size: 27px;\n  line-height: 1.4;\n  font-weight: 650;\n  letter-spacing: -0.035em;\n}\n.settings-account-header .settings-page-description {\n  margin: 8px 0 0;\n  font-size: 13px;\n}\n\n.settings-account-status {\n  margin: 0;\n  color: var(--settings-muted);\n  font-size: 12px;\n}\n.settings-account-status:empty {\n  display: none;\n}\n\n.settings-account-toolbar {\n  margin-top: 27px;\n  padding: 18px 0;\n  border-top: 1px solid var(--settings-border);\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  flex-wrap: wrap;\n}\n.settings-account-count {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  white-space: nowrap;\n}\n.settings-account-count > :last-child {\n  color: var(--settings-muted);\n  font-variant-numeric: tabular-nums;\n}\n.settings-account-search {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--settings-muted);\n  margin-right: auto;\n  min-width: 0;\n  max-width: 100%;\n}\n.settings-account-search svg {\n  flex: none;\n}\n.settings-account-toolbar input {\n  min-width: 80px;\n  width: 210px;\n  max-width: 100%;\n  padding: 5px 0;\n  color: var(--settings-text);\n  background: transparent;\n  border: 0;\n  font-size: 13px;\n}\n.settings-account-toolbar input::placeholder {\n  color: var(--settings-muted);\n}\n.settings-account-display-controls {\n  display: flex;\n  padding: 3px;\n  border: 1px solid var(--settings-border);\n  border-radius: 7px;\n  background: var(--settings-inset);\n}\n.settings-account-display-controls button {\n  padding: 4px 10px;\n  color: var(--settings-muted);\n  background: transparent;\n  border: 0;\n  border-radius: 4px;\n  font-size: 12px;\n  cursor: pointer;\n}\n.settings-account-display-controls button:hover {\n  color: var(--settings-text);\n}\n.settings-account-display-controls button[aria-pressed="true"] {\n  color: var(--settings-text);\n  background: var(--settings-active);\n}\n\n.settings-account-groups {\n  display: grid;\n  gap: 22px;\n}\n.settings-account-group__title {\n  margin: 0 0 8px;\n  color: var(--settings-text);\n  font-size: 13px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n}\n.settings-account-list {\n  --account-border: light-dark(#e2e2e8, #36363b);\n  --account-muted: light-dark(#676773, #a5a5af);\n  border: 1px solid var(--account-border);\n  border-radius: 11px;\n  overflow: hidden;\n  container-type: inline-size;\n}\n.settings-account-list > .settings-account-empty {\n  margin: 0;\n  padding: 28px 16px;\n}\n.settings-account-table {\n  width: 100%;\n  table-layout: fixed;\n  border-collapse: collapse;\n  font-size: 12px;\n}\n.settings-account-table th {\n  padding: 12px 16px;\n  color: var(--account-muted);\n  background: light-dark(#f8f8fa, #202024);\n  font-size: 11px;\n  font-weight: 500;\n  text-align: left;\n}\n.settings-account-table th:nth-child(1) {\n  width: 32%;\n}\n.settings-account-table th:nth-child(2),\n.settings-account-table th:nth-child(3) {\n  width: 24%;\n}\n.settings-account-table th:nth-child(4) {\n  width: 20%;\n  text-align: right;\n}\n.settings-account-table--api th:nth-child(1) {\n  width: 48%;\n}\n.settings-account-table--api th:nth-child(2) {\n  width: 32%;\n}\n.settings-account-table--api th:nth-child(3) {\n  width: 20%;\n  text-align: right;\n}\n.settings-account-table td {\n  padding: 17px 16px;\n  vertical-align: middle;\n  border-top: 1px solid var(--settings-divider);\n}\n.settings-account-row {\n  background: light-dark(#ffffff, #232326);\n}\n.settings-account-row:hover {\n  background: light-dark(#f7f7fa, #26262a);\n}\n.settings-account-row__person {\n  display: grid;\n  grid-template-columns: 34px minmax(0, 1fr);\n  align-items: center;\n  gap: 11px;\n  min-width: 0;\n}\n.settings-account-row__mark {\n  display: grid;\n  place-items: center;\n  width: 34px;\n  height: 34px;\n  color: light-dark(#67558d, #c3baff);\n  background: light-dark(#f0ecf7, #353044);\n  border: 1px solid light-dark(#d9d0e6, #4d435f);\n  border-radius: 10px;\n}\n.settings-account-row__identity {\n  min-width: 0;\n}\n.settings-account-email {\n  display: block;\n  min-width: 0;\n  overflow: hidden;\n  font-size: 12px;\n  font-weight: 550;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.settings-account-metadata {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  gap: 5px;\n  margin-top: 4px;\n  color: var(--settings-muted);\n  flex-wrap: wrap;\n  font-size: 11px;\n  overflow-wrap: anywhere;\n}\n.settings-account-plan {\n  flex: none;\n  padding: 0 4px;\n  color: var(--settings-muted);\n  border: 1px solid var(--settings-border);\n  border-radius: 5px;\n  font-size: 10px;\n  max-width: 100%;\n  overflow-wrap: anywhere;\n}\n.settings-account-plan--highlighted {\n  color: light-dark(#654f91, #c8bfff);\n  background: light-dark(#f2edf9, #a99bff18);\n  border-color: light-dark(#d9ccea, #a99bff52);\n  font-weight: 600;\n}\n.settings-account-active {\n  flex: none;\n  color: light-dark(#66548e, #c8bfff);\n  font-size: 10px;\n  white-space: nowrap;\n}\n\n.settings-account-usage {\n  display: grid;\n  gap: 10px;\n}\n.settings-account-usage__meter {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  grid-template-rows: 20px 4px 17px;\n  align-items: center;\n  gap: 6px 0;\n  min-width: 0;\n  font-variant-numeric: tabular-nums;\n}\n:host([lang="zh-CN"]) .settings-account-usage__meter {\n  grid-template-columns: 48px minmax(36px, 1fr) 72px;\n}\n.settings-account-usage__meter--balance {\n  display: flex;\n  grid-template-columns: none;\n  justify-content: flex-start;\n  gap: 6px;\n}\n.settings-account-usage__balance {\n  display: inline-flex;\n  align-items: baseline;\n  gap: 4px;\n  font-size: 14px;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n\n.settings-account-usage__title {\n  display: none;\n  min-width: 0;\n  color: var(--settings-muted);\n  font-size: 11px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.settings-account-extra-usage {\n  display: grid;\n  gap: 12px;\n  margin-top: 14px;\n}\n.settings-account-extra-usage .settings-account-usage__meter {\n  grid-template-rows: auto 20px 4px 17px;\n}\n.settings-account-extra-usage .settings-account-usage__title {\n  display: block;\n  grid-column: 1 / -1;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n.settings-account-usage__percent {\n  grid-column: 1 / -1;\n  min-width: 0;\n  display: flex;\n  align-items: baseline;\n  justify-content: flex-end;\n  gap: 7px;\n  font-size: 14px;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.settings-account-usage__countdown {\n  min-width: 0;\n  color: var(--settings-muted);\n  font-size: 10px;\n  font-weight: 400;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.settings-account-usage__percent > :last-child {\n  flex: none;\n}\n.settings-account-usage__percent--warn {\n  color: var(--settings-warning);\n}\n.settings-account-usage__percent--hot {\n  color: var(--settings-danger);\n}\n.settings-account-usage__bar {\n  grid-column: 1 / -1;\n  height: 4px;\n  overflow: hidden;\n  background: light-dark(#e3e1e8, #3c3c43);\n  border-radius: 4px;\n}\n.settings-account-usage__bar > span {\n  display: block;\n  height: 100%;\n  background: light-dark(#81769e, #9993b8);\n  border-radius: inherit;\n}\n.settings-account-usage__bar--warn > span {\n  background: var(--settings-warning);\n}\n.settings-account-usage__bar--hot > span {\n  background: var(--settings-danger);\n}\n.settings-account-usage__sub {\n  grid-column: 1 / -1;\n  color: var(--account-muted);\n  font-size: 10px;\n  font-variant-numeric: tabular-nums;\n  text-align: right;\n  white-space: nowrap;\n}\n.settings-account-usage__message {\n  color: var(--settings-muted);\n}\n.settings-account-usage__missing {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-content: center;\n  gap: 6px;\n  min-height: 53px;\n  color: var(--settings-muted);\n}\n.settings-account-usage__missing > span:not(.settings-account-usage__title) {\n  grid-column: 1 / -1;\n  font-size: 14px;\n}\n.settings-account-management {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 4px;\n}\n.settings-account-native {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 3px;\n  color: var(--settings-muted);\n  font-size: 11px;\n}\n.settings-account-native .settings-icon-button {\n  width: 25px;\n  height: 28px;\n}\n.settings-account-usage > button {\n  justify-self: start;\n}\n.settings-account-actions {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 4px;\n  flex-wrap: wrap;\n}\n.settings-account-action {\n  padding: 4px 5px;\n  min-height: 30px;\n  font-size: 12px;\n  color: var(--settings-text);\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 7px;\n  white-space: nowrap;\n  cursor: pointer;\n}\n.settings-account-action:hover {\n  background: var(--settings-hover);\n}\n.settings-account-action:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n.settings-account-delete {\n  color: var(--settings-danger);\n}\n.settings-account-delete:hover,\n.settings-account-delete:focus-visible {\n  color: var(--settings-danger);\n  background: var(--settings-danger-bg);\n}\n.settings-account-reset-summary {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  min-height: 24px;\n  padding: 3px 0;\n  font-size: 10px;\n  white-space: nowrap;\n  color: var(--settings-muted);\n  background: transparent;\n  border: 0;\n  border-radius: 5px;\n  cursor: pointer;\n}\n.settings-account-reset-summary:hover {\n  background: var(--settings-hover);\n}\n.settings-account-reset-summary[aria-expanded="true"] > svg:last-child {\n  transform: rotate(90deg);\n}\n.settings-account-details-row > td {\n  background: var(--settings-inset);\n}\n.settings-account-reset-details {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n.settings-account-reset-details strong {\n  font-size: 12px;\n}\n.settings-account-reset-expiry {\n  margin: 6px 0;\n  color: var(--settings-muted);\n  font-size: 11px;\n}\n.settings-account-reset-expiry.is-warn {\n  color: var(--settings-warning);\n}\n.settings-account-reset-expiry.is-hot {\n  color: var(--settings-danger);\n}\n.settings-account-reset-list {\n  margin: 8px 0 0;\n  padding: 0;\n  list-style: none;\n  color: var(--settings-muted);\n  font-size: 11px;\n}\n.settings-account-reset-list li + li {\n  margin-top: 4px;\n}\n.settings-account-empty {\n  text-align: center;\n  color: var(--settings-muted);\n}\n.settings-account-verification {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n  color: var(--settings-muted);\n}\n.settings-account-verification a {\n  color: var(--settings-focus);\n  overflow-wrap: anywhere;\n}\n.settings-account-verification code {\n  padding: 5px 8px;\n  color: var(--settings-text);\n  font-size: 15px;\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  background: var(--settings-inset);\n  border-radius: 6px;\n}\n.settings-account-list :focus-visible,\n.settings-account-toolbar :focus-visible {\n  outline: 2px solid var(--settings-focus);\n  outline-offset: -2px;\n}\n\n.settings-account-dialog {\n  position: fixed;\n  width: min(360px, calc(100vw - 40px));\n  max-height: calc(100vh - 40px);\n  overflow: auto;\n  padding: 22px;\n  color: var(--settings-text);\n  background: var(--settings-elevated);\n  border: 1px solid var(--settings-border);\n  border-radius: 12px;\n  box-shadow: var(--settings-dialog-shadow);\n  text-align: left;\n}\n.settings-account-dialog::backdrop {\n  background: var(--settings-backdrop);\n}\n.settings-account-dialog h2 {\n  margin: 0 28px 12px 0;\n  font-size: 15px;\n}\n.settings-account-dialog p {\n  color: var(--settings-muted);\n  font-size: 12px;\n  line-height: 1.6;\n  overflow-wrap: anywhere;\n}\n.settings-account-dialog__close {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n}\n.settings-account-dialog__actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n\n@container (max-width: 680px) {\n  .settings-account-table,\n  .settings-account-table tbody {\n    display: block;\n  }\n  .settings-account-table thead {\n    display: none;\n  }\n  .settings-account-row {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n    padding: 18px;\n    gap: 18px 22px;\n    border-top: 1px solid var(--settings-divider);\n  }\n  .settings-account-row:first-child {\n    border-top: 0;\n  }\n  .settings-account-table .settings-account-row > td {\n    display: block;\n    min-width: 0;\n    padding: 0;\n    border: 0;\n  }\n  .settings-account-person-cell,\n  .settings-account-management-cell,\n  .settings-account-usage-cell--message,\n  .settings-account-table--api .settings-account-usage-cell {\n    grid-column: 1 / -1;\n  }\n  .settings-account-table .settings-account-management-cell {\n    border-top: 1px solid var(--settings-divider);\n    padding-top: 8px;\n  }\n  .settings-account-email {\n    font-size: 13px;\n  }\n  .settings-account-usage__title {\n    display: block;\n    grid-column: 1;\n  }\n  .settings-account-usage__percent,\n  .settings-account-usage__missing > span:not(.settings-account-usage__title) {\n    grid-column: 2;\n    text-align: right;\n  }\n  .settings-account-extra-usage .settings-account-usage__percent {\n    grid-column: 1 / -1;\n  }\n  .settings-account-management {\n    flex-direction: row;\n    justify-content: space-between;\n  }\n  .settings-account-actions {\n    order: 1;\n    margin-left: auto;\n  }\n  .settings-account-native {\n    justify-content: flex-start;\n  }\n  .settings-account-table tr:not(.settings-account-row, [hidden]),\n  .settings-account-table tr:not(.settings-account-row, [hidden]) > td {\n    display: block;\n  }\n}\n\n@container (max-width: 360px) {\n  .settings-account-row {\n    grid-template-columns: minmax(0, 1fr);\n    gap: 16px;\n    padding: 16px;\n  }\n}\n\n@media (forced-colors: active) {\n  .settings-account-usage__bar {\n    border: 1px solid CanvasText;\n  }\n  .settings-account-usage__bar > span {\n    background: Highlight;\n  }\n}\n';
 
   // src/settings/shell.ts
   var SETTINGS_SHELL_ATTRIBUTE = "data-codexhost-settings-shell";
@@ -27149,7 +27508,9 @@ ${accounts_default}`;
       RENDERER_SETTINGS_NAV_SECTIONS.flatMap((section) => [...section.pageIds])
     );
     for (const section of RENDERER_SETTINGS_NAV_SECTIONS) {
-      const pages = section.pageIds.map((pageId) => resolvedRegistry.getPage(pageId)).filter((definition) => definition !== void 0);
+      const pages = section.pageIds.map((pageId) => resolvedRegistry.getPage(pageId)).filter(
+        (definition) => definition !== void 0
+      );
       const leftovers = section.id === "other" ? resolvedRegistry.pages.filter((definition) => !assignedPageIds.has(definition.id)) : [];
       if (pages.length === 0 && leftovers.length === 0) continue;
       appendNavigationSection(rendererSettingsNavSectionLabel(section.id, messages));
@@ -28037,6 +28398,7 @@ ${accounts_default}`;
     const mountedByComposer = /* @__PURE__ */ new Map();
     const pendingReplacements = /* @__PURE__ */ new Map();
     let disposed = false;
+    const disposeReasoningSoftWrap = installReasoningTranscriptSoftWrap(document);
     let scanScheduled = false;
     let refreshTargetsOnNextScan = false;
     let adapterDispose = null;
@@ -28272,7 +28634,7 @@ ${accounts_default}`;
         if (threadIdFromComposerModelTarget(mounted.modelTarget) !== update.threadId) continue;
         mounted.usageRequestGeneration += 1;
         mounted.usage = update.usage;
-        mounted.accountCredits = update.accountCredits ?? null;
+        mounted.accountCredits = composerAccountCredits(update.accountCredits);
         usageRefreshAttempts.delete(mounted.composer);
         renderMounted(mounted);
       }
@@ -28295,7 +28657,7 @@ ${accounts_default}`;
         if (disposed || mounted.hostId !== hostId || composerCodexAccounts(mounted.composer) !== accounts || !mounted.composer.isConnected || mountedByComposer.get(mounted.composer) !== mounted || mounted.usageRequestGeneration !== generation || controller.get(mounted.composer).agent !== "codex" || controller.get(mounted.composer).phase !== "draft" || controller.isSubmissionPending(mounted.composer) || threadIdFromComposerModelTarget(mounted.modelTarget) || accounts.selection.selectedAccountId !== accountId || result.accountId !== accountId)
           return;
         mounted.usage = result.usage;
-        mounted.accountCredits = result.accountCredits ?? null;
+        mounted.accountCredits = composerAccountCredits(result.accountCredits);
         renderMounted(mounted);
       } catch {
       }
@@ -28323,7 +28685,7 @@ ${accounts_default}`;
           return;
         }
         mounted.usage = result.usage;
-        mounted.accountCredits = result.accountCredits ?? null;
+        mounted.accountCredits = composerAccountCredits(result.accountCredits);
         const agent = controller.get(mounted.composer).agent;
         if (result.usage !== null && (!externalAgentHasAccountCredits(agent) || result.accountCredits)) {
           usageRefreshAttempts.delete(mounted.composer);
@@ -29456,7 +29818,7 @@ ${accounts_default}`;
         ownershipStatus: threadIdFromComposerModelTarget(modelTarget) ? inherited ? "ready" : "loading" : "not-required",
         threadConfiguration: inherited?.threadConfiguration,
         usage: inherited?.usage ?? null,
-        accountCredits: inherited?.accountCredits ?? null,
+        accountCredits: composerAccountCredits(inherited?.accountCredits),
         hostId: inherited?.hostId ?? hostId,
         usageRequestGeneration: 0,
         commandRequestGeneration: 0
@@ -29870,6 +30232,7 @@ ${accounts_default}`;
         applyAdapterAgent = null;
         modelControl = null;
         mutationObserver.disconnect();
+        disposeReasoningSoftWrap();
         sidebarAgentIcons.dispose();
         stopSidebarExternalPinning();
         settingsLifecycle.dispose();