@walkhi/code-relax 0.1.0-beta.1

package/dist/web/chat.css

@@ -0,0 +1,736 @@
+    :root { --color-chart-blue:#339cff; --color-chart-purple:#ad7bf9; color-scheme: dark; font: 14px/1.45 Inter, "Segoe UI", sans-serif; background: #101311; color: #e8eee9; }
+    .sidebar-brand > span { touch-action: manipulation; user-select: none; }
+    .connection-notice { display:flex; flex:none; align-items:center; gap:8px; padding:6px 10px; color:#87958c; font-size:12px; }
+    .connection-notice[hidden] { display:none; }
+    .connection-indicator { width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
+    .connection-notice.connecting .connection-indicator { width:10px; height:10px; background:none; border:1.5px solid currentColor; border-right-color:transparent; animation:connection-spin 1s linear infinite; }
+    .connection-notice button { margin-left:auto; padding:3px 6px; border:0; background:transparent; color:inherit; font-size:inherit; }
+    @keyframes connection-spin { to { transform:rotate(360deg); } }
+    .model-menu[aria-disabled="true"] .model-option, .model-menu[aria-disabled="true"] .effort-track { opacity:.45; }
+    .file-action-menu { position:fixed; z-index:80; display:grid; min-width:180px; max-width:min(280px, calc(100vw - 16px)); gap:3px; padding:5px; border:1px solid #465149; border-radius:11px; background:#252d28; box-shadow:0 10px 28px #0007; }
+    .file-action-name { display:flex; min-width:0; padding:7px 9px 8px; overflow:hidden; border-bottom:1px solid #465149; color:#b8c4bc; font-size:12px; line-height:16px; white-space:nowrap; }
+    .file-action-name-body { min-width:0; overflow:hidden; direction:rtl; text-align:left; text-overflow:ellipsis; unicode-bidi:plaintext; }
+    .file-action-name-extension { flex:none; }
+    .link-action-url { display:block; overflow:hidden; direction:ltr; text-align:left; text-overflow:ellipsis; }
+    .file-action-menu > button { border:0; padding:8px 14px; background:transparent; text-align:left; }
+    .file-action-menu > button:hover { background:#ffffff0d; }
+    html { height: 100%; overflow: hidden; }
+    body { height: 100%; }
+    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
+    body { display: flex; flex-direction: column; margin: 0; min-height: 100vh; overflow: hidden; background: radial-gradient(circle at 20% 0%, #203329 0, #101311 38%); }
+    header { display: flex; flex: none; align-items: center; gap: 13px; min-width: 0; padding: 10px 18px; border-bottom: 1px solid #2c3830; white-space: nowrap; }
+    h1 { flex: none; margin: 0; font-size: 16px; }
+    .sub { min-width: 0; overflow: hidden; color: #9fb0a5; font-size: 11px; text-overflow: ellipsis; }
+    .status { display: inline-flex; flex: none; align-items: center; gap: 7px; margin-left: auto; color: #b8c8bd; font-size: 12px; }
+    .dot { width: 9px; height: 9px; border-radius: 50%; background: #768078; }
+    .dot.ok { background: #42d17b; box-shadow: 0 0 12px #42d17b80; }
+    main { display: grid; grid-template-columns: minmax(230px, 280px) minmax(0, 1fr); flex: 1; min-height: 0; }
+    aside { min-height: 0; overflow-y: auto; overflow-anchor: none; overscroll-behavior: contain; border-right: 1px solid #2c3830; padding: 12px 8px; background: #171c19; scrollbar-width: thin; scrollbar-color: #3b443f transparent; }
+    section { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; padding: 14px 22px 18px; }
+    button, textarea, select { font: inherit; }
+    button { border: 1px solid #405248; background: #1d2821; color: #e8eee9; border-radius: 8px; padding: 8px 12px; cursor: pointer; }
+    button:hover { background: #29372e; }
+    button:disabled { opacity: .45; cursor: default; }
+    button { appearance:none; -webkit-appearance:none; }
+    button:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible) { outline:none; }
+    button:focus-visible, [role="button"]:focus-visible { outline:2px solid #6b9fd8; outline-offset:2px; }
+    .toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 28px; margin: 0 4px 7px; color: #8d9891; }
+    .sidebar-title { font-size: 12px; font-weight: 650; letter-spacing: .04em; }
+    .project.recent { margin-top: 24px; }
+    .project.recent .project-tasks { margin: 0; padding-left: 0; }
+    .recent-heading { margin: 0; padding: 6px 10px; color: #858e89; font-size: 12px; font-weight: 600; }
+    .refresh-icon { width: 25px; height: 25px; border: 0; padding: 0; border-radius: 6px; color: #8d9891; background: transparent; font-size: 15px; }
+    .project { margin: 0 0 4px; }
+    .project-header { display: flex; align-items: center; width: calc(100% - 4px); min-width: 0; margin: 0 2px; border: 0; border-radius: 6px; padding: 2px 4px; color: #d4ddd7; background: transparent; }
+    .project-header:hover { background: #222824; }
+    .project-toggle { display: flex; flex: 1; min-width: 0; align-items: center; border: 0; padding: 3px 2px; color: inherit; background: transparent; text-align: left; }
+    .project-toggle:hover { background: transparent; }
+    .project-folder { display: grid; place-items: center; width: 17px; height: 17px; flex: none; margin-right: 8px; color: #aab3ad; }
+    .project-folder svg { display: block; width: 17px; height: 17px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
+    .project-name { flex: 1; min-width: 0; overflow: hidden; font-size: 12px; font-weight: 500; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
+    .project-path, .project-count { display: none; }
+    .project-tasks { margin: 0 3px 2px 17px; padding-left: 7px; }
+    .project.collapsed .project-tasks { display: none; }
+    .task-swipe { position:relative; width:100%; overflow:hidden; border-radius:7px; -webkit-user-select:none; user-select:none; }
+    .task { position:relative; z-index:1; display: flex; width: 100%; min-width: 0; align-items: center; gap: 8px; margin: 1px 0; border: 0; border-radius: 7px; padding: 6px 9px; color: #cbd4ce; background: #171c19; text-align: left; touch-action:pan-y; transition:transform .16s ease; }
+    .task-swipe-action { position:absolute; z-index:0; inset:1px 0 1px auto; width:104px; display:flex; align-items:center; justify-content:flex-end; pointer-events:none; border:0; padding:0 12px 6px; color:#f3b45f; background:transparent; font-size:12px; }
+    .task-swipe.swiping { background:#202823; }
+    .task-swipe.swiping .task { border-radius:0; background:#202823; }
+    .task-swipe .task-swipe-action { width:max-content; white-space:nowrap; transform:translateX(calc(100% - var(--swipe-offset, 0px))); }
+    .task-swipe.swiping::after { content:''; position:absolute; z-index:2; right:0; bottom:2px; width:var(--swipe-threshold); height:2px; border-radius:999px; background:linear-gradient(to left, #f3b45f calc(var(--swipe-progress, 0) * 100%), #f3b45f30 0); pointer-events:none; }
+    .task-swipe.swipe-ready::after { background:#ffd08a; }
+    .task-swipe.swipe-ready .task-swipe-action { color:#ffd08a; }
+    .task-swipe-action[hidden] { display:none; }
+    .task:hover { background: #242a26; }
+    .task.active { background: #303632; }
+    .task-title { flex: 1; min-width: 0; overflow: hidden; font-size: 12px; font-weight: 400; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
+    .running-status { width: 13px; height: 13px; flex: none; border: 1.5px solid #5e6962; border-top-color: #c2cbc5; border-radius: 50%; animation: status-spin .9s linear infinite; }
+    .approval-status { display: inline-flex; align-items: center; flex: none; color: #f2b65a; font-size: 12px; font-weight: 650; line-height: 1.2; white-space: nowrap; }
+    .unread-status { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #4285e8; }
+    .project-header > :is(.approval-status, .running-status, .unread-status) { margin: 0 7px 0 auto; }
+    .project-actions { display: flex; flex: none; align-items: center; gap: 1px; opacity: 0; pointer-events: none; }
+    .project-header:hover > :is(.approval-status, .running-status, .unread-status), .project-header:focus-within > :is(.approval-status, .running-status, .unread-status) { display: none; }
+    .project-header:hover .project-actions, .project-header:focus-within .project-actions { opacity: 1; pointer-events: auto; }
+    .project-action { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 5px; padding: 0; color: #9ca69f; background: transparent; }
+    .project-action:hover { color: #e1e7e3; background: #353c38; }
+    .project-action.more { font-size: 16px; letter-spacing: 1px; line-height: 1; }
+    .project-action[aria-disabled="true"] { cursor: default; }
+    .project-action svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+    @keyframes status-spin { to { transform: rotate(360deg); } }
+    .task-meta { display: none; }
+    .archive-list-entry { display:flex; align-items:center; gap:9px; flex:none; width:100%; padding:9px 8px; border:0; border-radius:0; background:transparent; color:#9eaca3; text-align:left; font-size:12px; }
+    .archive-list-entry > span { flex:1; }
+    .archive-list-entry[hidden] { display:none; }
+    #empty { color: #91a397; padding: 28px 0; }
+    #selected { display: flex; flex: 1; min-height: 0; flex-direction: column; }
+    #selected[hidden] { display: none; }
+    .selected-heading { display: flex; flex: none; align-items: center; min-width: 0; min-height: 28px; padding: 2px; margin-bottom: 4px; background: transparent; white-space: nowrap; }
+    #selectedTitle { flex: 0 1 auto; min-width: 0; overflow: hidden; margin: 0; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
+    #selectedMeta { display: flex; flex: 1; min-width: 0; flex-wrap: nowrap; align-items: center; gap: 7px; overflow: hidden; color: #91a397; font-size: 11px; }
+    #selectedMeta > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .live { display: inline-flex; align-items: center; gap: 5px; color: #7d9183; }
+    .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #68736b; }
+    .live.connected { color: #71d695; }
+    .live.connected::before { background: #42d17b; box-shadow: 0 0 8px #42d17b80; }
+    #timeline { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: 12px; overflow-y: auto; overscroll-behavior: contain; padding: 6px 14px 18px 0; scroll-padding-bottom: 18px; scrollbar-width: none; }
+    #timeline::-webkit-scrollbar { display: none; }
+    .scroll-to-bottom { position: absolute; z-index: 8; right: 34px; bottom: 122px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #3b453f; border-radius: 50%; padding: 0; color: #e1e7e3; background: #202622; transition: background-color .15s ease, opacity .15s ease; }
+    .scroll-to-bottom .codex-icon { width: 20px; height: 20px; transform: rotate(180deg); }
+    .scroll-to-bottom[hidden] { display: none; }
+    .turn { display: flex; flex-direction: column; min-width: 0; gap: 12px; }
+    .turn-label { align-self: center; color: #748379; font-size: 11px; margin: 5px 0; }
+    .turn-error { display: flex; align-items: flex-start; align-self: stretch; gap: 9px; border: 1px solid #343c37; border-radius: 14px; padding: 12px 14px; color: #e6ebe7; font-size: 12px; line-height: 1.45; }
+    .turn-error-icon { display: grid; place-items: center; width: 16px; height: 16px; flex: none; margin-top: 1px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 10px; font-weight: 750; line-height: 1; }
+    .turn-error-message { min-width: 0; word-break: break-word; }
+    .message { max-width: 88%; border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.55; word-break: break-word; }
+    .message.user { align-self: flex-end; background: #244a35; border: 1px solid #397655; }
+    .pending-message { display: flex; flex-direction: column; align-self: stretch; min-width: 0; gap: 6px; }
+    .pending-message-status { align-self:flex-end; color:#94a79a; font-size:12px; }
+    .pending-message-actions { align-self:flex-end; display:flex; gap:8px; }
+    .pending-message-actions[hidden] { display:none; }
+    .pending-message-actions button { padding:4px 8px; font-size:12px; background:transparent; color:#94a79a; }
+    .message.agent { align-self: stretch; max-width: 100%; padding: 3px 2px; border: 0; border-radius: 0; background: transparent; }
+    .message.commentary { color: #b9c9be; border-style: dashed; }
+    .message.final { border: 0; background: transparent; }
+    .role { display: none; }
+    .message-body { min-width: 0; }
+    .message-body > :first-child { margin-top: 0; }
+    .message-body > :last-child { margin-bottom: 0; }
+    .message-body p { margin: .6em 0; }
+    .message-body h1, .message-body h2, .message-body h3, .message-body h4 { margin: .9em 0 .45em; line-height: 1.3; }
+    .message-body h1 { font-size: 1.35em; }
+    .message-body h2 { font-size: 1.22em; }
+    .message-body h3, .message-body h4 { font-size: 1.08em; }
+    .message-body ul, .message-body ol { margin: .55em 0; padding-left: 1.5em; }
+    .message-body blockquote { margin: .7em 0; padding: .1em 0 .1em .9em; border-left: 3px solid #4f765e; color: #b6c5ba; }
+    .message-body code { border-radius: 4px; padding: .12em .35em; background: #0b100d; font: .88em/1.45 "Cascadia Mono", Consolas, monospace; }
+    .message-body pre { margin: .75em 0; padding: 11px 12px; overflow: auto; border: 1px solid #29372e; border-radius: 8px; background: #090c0a; white-space: pre; }
+    .message-body pre code { padding: 0; background: transparent; font-size: 12px; }
+    .message-body .code-block { margin: .75em 0; overflow: hidden; border: 1px solid #29372e; border-radius: 12px; background: #090c0a; }
+    .message-body .code-block-header { display: flex; min-height: 48px; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; color: #aeb9b2; font-size: 14px; font-weight: 500; line-height: 1.3; user-select: none; }
+    .message-body .code-block-language { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .message-body .code-block-copy { display: grid; place-items: center; width: 32px; height: 32px; flex: none; margin-left: auto; border: 0; border-radius: 8px; padding: 0; color: #aeb9b2; background: transparent; }
+    .message-body .code-block-copy:hover { color: #e8eee9; background: #ffffff0d; }
+    .message-body .code-block-copy[data-copy-state="copied"] { color: #e8eee9; }
+    .message-body .code-block-copy-icon { display: block; width: 16px; height: 16px; }
+    .message-body .code-block pre { margin: 0; padding: 0 16px 12px; border: 0; border-radius: 0; background: transparent; }
+    .message-body .code-block code.hljs { color: #d9e3dc; }
+    .message-body .hljs-comment, .message-body .hljs-quote { color: #789083; font-style: italic; }
+    .message-body .hljs-keyword, .message-body .hljs-selector-tag, .message-body .hljs-literal,
+    .message-body .hljs-section, .message-body .hljs-link { color: #c99aef; }
+    .message-body .hljs-string, .message-body .hljs-doctag, .message-body .hljs-regexp,
+    .message-body .hljs-template-tag, .message-body .hljs-template-variable { color: #a7d08c; }
+    .message-body .hljs-number, .message-body .hljs-symbol, .message-body .hljs-bullet { color: #efb36d; }
+    .message-body .hljs-title, .message-body .hljs-title.class_, .message-body .hljs-title.function_ { color: #82b7e8; }
+    .message-body .hljs-type, .message-body .hljs-built_in, .message-body .hljs-attribute,
+    .message-body .hljs-selector-attr, .message-body .hljs-selector-class, .message-body .hljs-selector-pseudo { color: #e4ca82; }
+    .message-body .hljs-variable, .message-body .hljs-params, .message-body .hljs-property { color: #d9e3dc; }
+    .message-body .hljs-meta, .message-body .hljs-meta .hljs-keyword { color: #85c9c0; }
+    .message-body .hljs-addition { color: #85c997; background: #2d694733; }
+    .message-body .hljs-deletion { color: #ed9292; background: #7d303033; }
+    .message-body .hljs-emphasis { font-style: italic; }
+    .message-body .hljs-strong { font-weight: 700; }
+    .message-body a { color: #73d99a; text-decoration: none; }
+    .message-body a:hover { text-decoration: underline; }
+    .message-body table { display: block; max-width: 100%; overflow: auto; border-collapse: collapse; }
+    .message-body th, .message-body td { border: 1px solid #35433a; padding: 6px 8px; }
+    .message-body hr { border: 0; border-top: 1px solid #35433a; }
+    .user-attachments { display: flex; align-self: flex-end; max-width: 88%; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
+    .image-thumb { width: 72px; height: 72px; overflow: hidden; padding: 0; border: 1px solid #45564b; border-radius: 8px; background: #0b0e0c; }
+    .image-thumb:hover { border-color: #6e8a78; background: #0b0e0c; }
+    .image-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
+    #draftImages .image-thumb { position: relative; margin-bottom: 8px; }
+    .remove-image { position: absolute; right: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #101311dd; color: white; line-height: 18px; }
+    .message.agent .message-image { display: block; max-width: min(100%, 640px); max-height: 380px; margin-top: 9px; border-radius: 8px; object-fit: contain; }
+    .activity { align-self: stretch; border: 0; border-radius: 6px; background: transparent; color: #8f9b93; }
+    .activity summary { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 3px 2px; font-size: 12px; line-height: 1.35; white-space: nowrap; list-style: none; }
+    .activity summary::-webkit-details-marker { display: none; }
+    .activity-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .activity-icon { width: 15px; height: 15px; flex: none; color: #8e9892; }
+    .activity-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+    .activity-icon.filled svg { fill: currentColor; stroke: none; }
+    .activity pre { margin: 0; padding: 2px 8px 6px 20px; overflow: auto; white-space: pre-wrap; word-break: break-word; font: 10.5px/1.45 "Cascadia Mono", Consolas, monospace; }
+    .activity.compact { display: flex; align-items: center; gap: 6px; padding: 3px 2px; font-size: 12px; line-height: 1.35; }
+    .activity-copy { display: grid; place-items: center; width: 26px; height: 26px; flex: none; padding: 0; border: 0; border-radius: 5px; color: #819087; background: transparent; }
+    .activity-copy:hover { color: #d5ddd8; background: #ffffff0b; }
+    .activity-copy[data-copy-state="copied"] { color: #76d395; }
+    .activity-copy .code-block-copy-icon { display: block; width: 14px; height: 14px; }
+    .command-shell { margin: 4px 2px 8px 20px; overflow: hidden; border: 1px solid #354039; border-radius: 8px; background: #111713; color: #d5ddd8; }
+    .command-shell-command { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 7px; padding: 7px 8px 7px 10px; border-bottom: 1px solid #2a352e; font: 11px/1.5 "Cascadia Mono", Consolas, monospace; }
+    .command-shell-command code { min-width: 0; padding: 3px 0; overflow-wrap: anywhere; white-space: pre-wrap; color: inherit; background: transparent; }
+    .command-shell-prompt { padding-top: 3px; color: #76d395; user-select: none; }
+    .command-shell-output { position: relative; overflow: hidden; padding: 9px 36px 9px 10px; }
+    .command-shell-output pre { min-width: 0; min-height: 16px; max-height: 182px; padding: 0; overflow-x: hidden; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; color: #c2ccc5; font-size: 10.5px; }
+    .command-shell-output pre.empty { color: #758279; font-style: italic; white-space: pre-wrap; }
+    .command-shell-output .activity-copy { position: absolute; top: 5px; right: 5px; }
+    .command-shell-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; padding: 5px 9px 5px 10px; border-top: 1px solid #2a352e; color: #7f8d84; font-size: 10.5px; }
+    .command-shell-cwd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .command-shell-status { flex: none; color: #97a59c; }
+    .tool-detail { display: flex; flex-direction: column; gap: 8px; margin: 4px 2px 8px 20px; padding: 9px 10px; border: 1px solid #354039; border-radius: 8px; background: #111713; color: #c2ccc5; font-size: 11px; }
+    .tool-detail-section { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
+    .tool-detail-heading { color: #89968e; font-size: 10.5px; font-weight: 600; }
+    .tool-detail-fields { display: grid; grid-template-columns: minmax(58px, max-content) minmax(0, 1fr); gap: 4px 10px; margin: 0; }
+    .tool-detail-fields dt { color: #7f8d84; }
+    .tool-detail-fields dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
+    .tool-detail-fields dd > .tool-detail-fields { margin-top: 4px; }
+    .tool-detail .tool-detail-text { max-height: 200px; margin: 0; padding: 7px 8px; overflow: auto; white-space: pre-wrap; word-break: break-word; border-radius: 5px; background: #0b100d; color: #c2ccc5; font: 10.5px/1.5 "Cascadia Mono", Consolas, monospace; }
+    .tool-detail-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 18px; }
+    .tool-detail-section.error { color: #ec8b83; }
+    .tool-detail-footer { padding-top: 3px; border-top: 1px solid #2a352e; color: #7f8d84; text-align: right; font-size: 10px; }
+    .tool-detail .muted { color: #758279; }
+    .image-view-detail { padding: 4px 0 3px 23px; }
+    .image-view-thumb { display: block; width: 100px; height: 100px; overflow: hidden; padding: 0; border: 1px solid #354039; border-radius: 9px; background: #0b0e0c; }
+    .image-view-thumb:hover { border-color: #66776c; background: #0b0e0c; }
+    .image-view-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
+    .generated-image { align-self: flex-start; max-width: min(100%, 640px); }
+    .generated-image > .image-thumb { width: min(280px, 70vw); height: 160px; color: #89968e; }
+    .generated-image-button { display: block; max-width: 100%; overflow: hidden; padding: 0; border: 1px solid #354039; border-radius: 10px; background: #0b0e0c; }
+    .generated-image-button:hover { border-color: #66776c; background: #0b0e0c; }
+    .generated-image-preview { display: block; max-width: 100%; max-height: min(520px, 65vh); object-fit: contain; }
+    .generated-image-group { display: grid; grid-template-columns: minmax(0, 1fr) clamp(42px, 12vw, 56px); align-self: flex-start; width: min(100%, 712px); gap: 8px; }
+    .generated-image-stack { position: relative; min-width: 0; aspect-ratio: 1; overflow: hidden; border: 1px solid #354039; border-radius: 10px; background: #0b0e0c; }
+    .generated-image-slide { position: absolute; inset: 0; display: grid; place-items: center; }
+    .generated-image-slide[hidden] { display: none; }
+    .generated-image-slide > .generated-image { width: 100%; height: 100%; max-width: none; }
+    .generated-image-slide .generated-image-button, .generated-image-slide .generated-image > .image-thumb { width: 100%; height: 100%; border: 0; border-radius: 0; }
+    .generated-image-slide .generated-image-preview { width: 100%; height: 100%; max-height: none; object-fit: contain; }
+    .generated-image-controls { display: flex; flex-direction: column; align-items: stretch; position: relative; gap: 8px; height: 0; min-height: 100%; overflow-y: auto; scrollbar-width: thin; }
+    .generated-image-thumbnail { flex: none; width: 100%; aspect-ratio: 1; padding: 2px; overflow: hidden; border: 2px solid transparent; border-radius: 7px; background: #151b17; color: #89968e; font-size: 10px; }
+    .generated-image-thumbnail[aria-pressed="true"] { border-color: #71d695; }
+    .generated-image-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
+    .process { align-self: stretch; min-width: 0; border: 0; border-radius: 0; background: transparent; }
+    .process > summary { display: flex; align-items: center; justify-content: flex-start; gap: 5px; cursor: pointer; padding: 8px 2px; border-bottom: 1px solid #252e28; color: #94a79a; font-size: 12px; font-weight: 650; list-style: none; }
+    .process > summary::-webkit-details-marker { display: none; }
+    .process > summary[aria-disabled="true"] { cursor:default; pointer-events:none; }
+    .disclosure-chevron { display: grid; place-items: center; width: 14px; height: 14px; flex: none; color: #758078; opacity: 0; transform: rotate(0deg); transition: transform .12s ease, opacity .12s ease; }
+    .disclosure-chevron svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+    :is(.process, .activity, .reasoning-history)[open] > summary > .disclosure-chevron { opacity: 1; }
+    .process[open] > summary > .disclosure-chevron { transform: rotate(90deg); }
+    .activity[open] > summary > .disclosure-chevron { transform: rotate(90deg); }
+    .process.running > summary { color: #71d695; }
+    .active-process > summary { min-width: 0; overflow: hidden; justify-content: flex-start; border-bottom: 0; color: #818c84; font-weight: 400; white-space: nowrap; }
+    .active-process > summary > .activity-title { flex: 0 1 auto; min-width: 0; }
+    .active-process > summary > .pulse { flex: 0 0 7px; margin-left: 2px; }
+    .active-process[open] > summary { border-bottom: 1px solid #252e28; }
+    .settled-process > summary { justify-content: flex-start; border-bottom: 0; color: #969f99; font-weight: 400; }
+    .settled-process[open] > summary { border-bottom: 0; }
+    .process-body { display: flex; flex-direction: column; gap: 4px; padding: 6px 0 9px; }
+    .process-body .settled-process { margin: 1px 0; }
+    .process-body .settled-process > summary { padding: 3px 2px; }
+    .process-body .settled-process > .process-body { gap: 0; padding: 2px 0 5px 15px; }
+    .process-body .message.commentary { max-width: 100%; padding: 2px 0; border: 0; border-radius: 0; background: transparent; color: #c4cec7; }
+    .process-body .message.commentary .role { display: none; }
+    .process-count { display: none; }
+    .turn-duration { align-self: stretch; padding: 9px 2px 8px; border-bottom: 1px solid #252e28; color: #969f99; font-size: 12px; font-weight: 650; }
+    .reasoning-history { color: #818c84; font-size: 12px; }
+    .reasoning-history > summary { display: flex; align-items: center; gap: 5px; cursor: pointer; padding: 5px 2px; list-style: none; }
+    .reasoning-history > summary::-webkit-details-marker { display: none; }
+    .reasoning-history[open] > summary > .disclosure-chevron { transform: rotate(90deg); }
+    .reasoning-history ol { margin: 3px 0 6px; padding-left: 23px; }
+    .reasoning-history li { margin: 5px 0; line-height: 1.45; }
+    .live-step { display: flex; align-items: center; gap: 8px; padding: 7px 2px 2px; color: #8f9a92; font-size: 12px; }
+    .pulse { width: 7px; height: 7px; border-radius: 50%; background: #52cc7c; animation: pulse 1.2s ease-in-out infinite; }
+    @keyframes pulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }
+    .attachment { display: inline-block; margin: 8px 6px 0 0; border: 1px solid #43604d; border-radius: 999px; padding: 3px 8px; color: #a8bbad; font-size: 11px; }
+    .diff-add { margin-left: 5px; color: #52d883; }
+    .diff-remove { margin-left: 3px; color: #ff625d; }
+    .queue-panel { display: grid; flex: none; gap: 5px; margin-top: 7px; }
+    .queue-panel[hidden] { display: none; }
+    .queued-message { display: flex; align-items: center; gap: 8px; min-width: 0; border: 1px solid #343b36; border-radius: 10px; padding: 7px 9px; background: #202421; color: #cbd4ce; font-size: 11px; }
+    .queued-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .queued-error { color: #ff8c82; }
+    .queue-action { flex: none; border: 0; padding: 4px 6px; background: transparent; color: #98a39c; font-size: 10px; }
+    .queue-action:hover { color: #e8eee9; background: #303632; }
+    .composer { container:composer / inline-size; position: relative; display: grid; flex: none; gap: 2px; margin-top: 8px; padding: 5px 11px; border: 1px solid #354139; border-radius: 15px; background: #181d1a; }
+    #draftImages:empty { display:none !important; }
+    .pending-settings { display: flex; align-items: center; gap: 5px; color: #9fb2a5; font-size: 11px; line-height: 1.35; }
+    .pending-settings[hidden] { display: none; }
+    .clear-pending-settings { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border: 0; border-radius: 5px; padding: 0; color: #829087; background: transparent; font-size: 16px; line-height: 1; }
+    .clear-pending-settings:hover { color: #e8eee9; background: #303632; }
+    textarea { width: 100%; min-height: 62px; resize: none; border: 0; outline: 0; padding: 3px 1px; color: #eef4ef; background: transparent; font-size: 13px; }
+    #prompt { width:calc(100% - 40px); height:48px; min-height:48px; overflow-y:auto; font-size:12px; line-height:1.5; }
+    .voice-stop-popover { position:absolute; bottom:calc(100% + 6px); left:12px; z-index:20; padding:4px; border:1px solid #465149; border-radius:12px; background:#252d28; box-shadow:0 4px 16px #0003; }
+    .voice-stop-popover[hidden] { display:none; }
+    #stopVoiceToEdit { min-width:112px; min-height:36px; padding:6px 16px; border:0; border-radius:8px; background:transparent; color:#dce3de; font-size:13px; }
+    #stopVoiceToEdit:disabled { opacity:.6; }
+    @media (prefers-color-scheme:light) { .voice-stop-popover { background:#f5f7f5; border-color:#d5ddd8; } #stopVoiceToEdit { color:#34443a; } }
+    .composer-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
+    #actionToast { position:fixed; top:calc(env(safe-area-inset-top, 0px) + 4px); left:50%; transform:translateX(-50%); max-width:calc(100vw - 24px); padding:6px 12px; font-size:12px; line-height:1.4; border-radius:8px; background:#364039; color:#f0f4f1; box-shadow:0 2px 10px #0004; z-index:100; pointer-events:none; }
+    .composer-controls { display: flex; align-items: center; gap: 12px; margin-left: auto; }
+    .permission-control { position:relative; flex:none; }
+    .permission-control[hidden], .permission-menu[hidden], .permission-option[hidden] { display:none; }
+    .permission-trigger { display:flex; align-items:center; gap:4px; height:28px; padding:0 6px; border:0; border-radius:7px; color:#aaa; background:transparent; font-size:11px; white-space:nowrap; }
+    .permission-trigger .codex-icon { width:14px; height:14px; }
+    .permission-trigger.full-access { color:#ef8a43; background:#ef8a4312; }
+    .permission-trigger:hover, .permission-trigger[aria-expanded="true"] { background:#ffffff0a; }
+    .permission-menu { position:absolute; z-index:21; bottom:calc(100% + 8px); left:0; width:318px; max-width:calc(100vw - 76px); padding:6px; border:1px solid #ffffff14; border-radius:14px; background:#303030; box-shadow:0 12px 28px #0005; }
+    .permission-menu-title { padding:4px 6px 7px; color:#aaa; font-size:11px; }
+    .permission-option { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:7px 6px; border:0; border-radius:8px; text-align:left; color:#eee; background:transparent; }
+    .permission-option:hover { background:#ffffff0a; }
+    .permission-option strong { display:block; font-size:12px; font-weight:600; }
+    .permission-option small { display:block; color:#aaa; font-size:11px; }
+    .permission-check { visibility:hidden; flex:none; }
+    .permission-option[aria-checked="true"] .permission-check { visibility:visible; }
+    .permission-option[data-permission="full"], .permission-option[data-permission="full"] small { color:#ef8a43; }
+    .model-control { position:relative; min-width: 0; }
+    .model-trigger { display: flex; align-items: center; gap: 6px; height: 32px; max-width: 230px; border: 0; padding: 0 7px; border-radius: 8px; color: #dbe3dd; background: transparent; font-size: 12px; }
+    .model-trigger[aria-expanded="true"] { background: #252c28; }
+    #modelSummary { display:flex; align-items:center; gap:4px; min-width:0; overflow:hidden; white-space:nowrap; }
+    #modelSummaryName { min-width:0; overflow:hidden; text-overflow:ellipsis; }
+    #modelSummaryEffort { flex:none; }
+    .model-fast-indicator { display:flex; flex:none; color:inherit; }
+    .model-fast-indicator[hidden] { display:none; }
+    .model-fast-indicator .codex-icon { width:14px; height:14px; }
+    #modelSummaryEffort { color:#aaa; }
+    .codex-icon { display: block; width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+    .codex-icon.filled { fill: currentColor; stroke: none; }
+    .chevron { display: grid; place-items: center; width: 14px; height: 14px; flex: none; color: #8d9a91; }
+    .chevron .codex-icon { width: 14px; height: 14px; }
+    .context-meter { --context-percent: 0; position: relative; width: 15px; height: 15px; flex: none; border-radius: 50%; background: conic-gradient(#77d99a calc(var(--context-percent) * 1%), #4a554e 0); }
+    .context-meter::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #181d1a; }
+    .context-meter.warning { background: conic-gradient(#f3bc66 calc(var(--context-percent) * 1%), #364139 0); }
+    .context-meter.danger { background: conic-gradient(#ff7d70 calc(var(--context-percent) * 1%), #364139 0); }
+    .question-reply + .question-reply { margin-top:12px; }
+    .question-history { margin:12px 0; }
+    .question-history p { margin:6px 0; }
+    .question-history button { margin-top:6px; padding:6px 10px; border:1px solid #8884; border-radius:8px; color:inherit; background:transparent; font-size:12px; }
+    .question-form { display:flex; flex-direction:column; margin:12px 0; padding:12px 15px; border:1px solid #8883; border-radius:20px; background:#2d2d2d; }
+    .question-header { order:-1; display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; color:#aaa; font-size:12px; }
+    .question-form fieldset { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; min-width:0; margin:0; padding:0; border:0; }
+    .question-form fieldset[hidden] { display:none; }
+    .question-group { display:contents; }
+    .question-group > div { grid-column:1/-1; }
+    .question-group > div:first-child { font-weight:600; font-size:13px; }
+    .question-choices { display:grid; gap:5px; counter-reset:choice; }
+    .question-form button { padding:5px 9px; border:1px solid #8884; border-radius:16px; color:inherit; background:transparent; font-size:12px; }
+    .question-choices button { display:flex; align-items:center; gap:9px; width:100%; padding:4px 0; border:0; border-radius:8px; text-align:left; counter-increment:choice; }
+    .question-choices button::before { content:counter(choice); display:grid; place-items:center; flex:none; width:26px; height:26px; border:1px solid #8884; border-radius:50%; background:#8881; color:#aaa; }
+    .question-choices button[aria-pressed="true"] { background:#8882; }
+    .question-choices button[aria-pressed="true"]::before { background:#ddd; color:#222; }
+    .question-form textarea { grid-column:1/-1; min-height:30px; height:30px; padding:6px 0; border:0; border-radius:0; font-size:13px; }
+    .question-group:nth-last-child(2) textarea { grid-column:1; }
+    .question-footer { display:flex; align-items:center; gap:8px; }
+    .question-form button[type="submit"] { background:#ddd; color:#222; }
+    .question-form button:disabled { opacity:.4; }
+    .question-header button { border:0; padding:2px 5px; }
+    .question-form fieldset:disabled { opacity:.65; }
+    @media(prefers-color-scheme:light) { .question-form { background:#f5f5f5; } }
+    .question-reply-question { font-size:.9em; opacity:.7; margin-bottom:4px; white-space:pre-wrap; }
+    .question-reply-answer { white-space:pre-wrap; overflow-wrap:anywhere; }
+    .context-control { position:relative; flex:none; }
+    .context-trigger { display:grid; place-items:center; width:26px; height:32px; padding:0; border:0; border-radius:7px; background:transparent; }
+    .context-trigger[aria-expanded="true"] { background:#ffffff0a; }
+    .context-details { position:absolute; z-index:23; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); width:220px; max-width:calc(100vw - 24px); padding:10px 12px; border:1px solid #ffffff14; border-radius:10px; color:#ddd; background:#303030; font-size:12px; box-shadow:0 8px 24px #0005; }
+    .context-details[hidden] { display:none; }
+    .model-menu { --effort-accent:var(--color-chart-blue); position: absolute; z-index: 20; left: 50%; transform:translateX(-50%); bottom: calc(100% + 8px); width: 252px; max-width:calc(100vw - 24px); max-height: 60dvh; overflow-y: auto; border: 1px solid #ffffff14; border-radius: 16px; padding: 7px; background: #2d2d2d; box-shadow: 0 14px 36px #0005; }
+    .model-menu[hidden] { display: none; }
+    .menu-view[hidden] { display: none; }
+    .menu-title { padding: 5px 8px 6px; color: #aab3ad; font-size: 11px; }
+    .menu-hint { padding: 6px 8px 3px; color: #818a84; font-size: 10px; }
+    .model-option { display: flex; width: 100%; align-items: center; justify-content: space-between; border: 0; border-radius: 8px; padding: 7px 9px; background: transparent; font-size: 12px; text-align: left; }
+    .model-option:hover, .model-option.selected { background: #3a3d3b; }
+    .model-option small { display: block; margin-top: 1px; color: #8d9690; font-size: 10px; }
+    .model-option .check { min-width: 14px; color: #e7eee9; text-align: right; }
+    .menu-divider { height: 1px; margin: 6px 5px; background: #414742; }
+    .effort-entry { display: flex; width: 100%; align-items: center; justify-content: space-between; border: 0; border-radius: 8px; padding: 8px 9px; color: #cbd3ce; background: transparent; font-size: 11px; }
+    .effort-entry:hover { background: #373b38; }
+    .effort-entry-value { color: var(--color-chart-blue); }
+    .effort-entry-label, .effort-entry-value { display: inline-flex; align-items: center; gap: 6px; }
+    .effort-entry-label .codex-icon { width: 14px; height: 14px; color: #9ca59f; }
+    .effort-entry-value .codex-icon { width: 12px; height: 12px; }
+    .effort-panel { padding: 2px 0 4px; }
+    .effort-header { display: grid; grid-template-columns: 28px 1fr 28px; align-items: start; min-height: 49px; }
+    .effort-bolt { display: grid; place-items: center; flex:none; width: 28px; height: 28px; padding:0; border:0; border-radius:7px; background:transparent; color: #9ca59f; }
+    .effort-bolt:hover { background:#ffffff0a; }
+    .effort-bolt[aria-checked="true"] { color:var(--effort-accent); background:transparent; }
+    .effort-bolt[aria-checked="true"] .codex-icon { fill:currentColor; }
+    .effort-bolt .codex-icon { width: 15px; height: 15px; }
+    .effort-heading { justify-self: center; min-width: 70px; border: 0; border-radius: 6px; padding: 3px 8px; text-align: center; color: #aaa; background: transparent; }
+    .effort-heading:hover { background: #ffffff0a; }
+    .effort-heading strong { display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--effort-accent); font-size: 12px; font-weight: 600; }
+    .effort-heading strong .codex-icon { width: 12px; height: 12px; color:#888; }
+    .effort-model-name { display: block; margin-top: 2px; font-size: 10px; }
+    .effort-track { --effort-progress: 0%; --effort-offset: 20px; --effort-range-offset: 14px; position: relative; height: 32px; margin: 5px 2px 3px; padding: 2px 6px; touch-action: none; user-select: none; cursor: ew-resize; }
+    .effort-rail { position: absolute; inset: 4px 6px; height: 24px; overflow: hidden; border:0; border-radius: 12px; background: #ffffff19; }
+    .effort-range { position: absolute; inset: 0 auto 0 0; width: calc(var(--effort-progress) + var(--effort-range-offset)); border-radius: 12px 0 0 12px; background: var(--color-chart-blue); }
+    .effort-options { position: absolute; inset: 2px 20px; }
+    .effort-option { position: absolute; top: 0; width: 28px; height: 28px; border: 0; padding: 0; transform: translateX(-50%); background: transparent; font-size: 0; }
+    .effort-option:hover, .effort-option:focus, .effort-option:active, .effort-option.selected { background:transparent; }
+    .effort-option:nth-child(1) { left: 0%; }
+    .effort-option:nth-child(2) { left: 20%; }
+    .effort-option:nth-child(3) { left: 40%; }
+    .effort-option:nth-child(4) { left: 60%; }
+    .effort-option:nth-child(5) { left: 80%; }
+    .effort-option:nth-child(6) { left: 100%; }
+    .effort-option::before { content: ""; display: block; width: 4px; height: 4px; margin: auto; border-radius: 50%; background: #7d827f; transition: transform .12s ease, background-color .2s ease; }
+    .effort-option.reached::before { background: #ffffff4d; }
+    .effort-option:active::before, .effort-option:focus-visible::before { box-shadow:0 0 0 2px #94b6e080; }
+    .effort-option:focus { outline:none; }
+    @media (hover:hover) and (pointer:fine) { .effort-option:hover::before { box-shadow:0 0 0 2px #94b6e080; } }
+    .effort-option:disabled { opacity: .35; }
+    .effort-thumb { position: absolute; z-index: 2; top: 2px; left: calc(var(--effort-progress) + var(--effort-offset)); width: 28px; height: 28px; pointer-events: none; transform: translateX(-50%); border:0; border-radius: 50%; background: #fff; }
+    .effort-panel.ultra { --effort-accent:var(--color-chart-purple); }
+    #modelSummaryEffort.ultra, #effortEntryText.ultra { color:var(--color-chart-purple); }
+    .effort-panel.ultra .effort-range { background:linear-gradient(90deg,color-mix(in srgb,var(--color-chart-blue) 60%,var(--color-chart-purple)),var(--color-chart-purple) 55%,color-mix(in srgb,var(--color-chart-purple) 72%,var(--color-chart-blue))); }
+    .effort-panel.ultra .effort-range::after { content:""; position:absolute; inset:0; opacity:.18; mix-blend-mode:luminosity; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
+    .effort-panel.ultra .effort-option:not(:disabled)::before, .effort-panel.fast .effort-option.reached::before { opacity:0; }
+    .setting-select { display: none; }
+    .composer-icon-button { flex-shrink: 0; }
+    #turnActions[hidden] { display: none; }
+    .send-control { position:relative; display:grid; place-items:center; width:26px; height:26px; flex:none; }
+    .queue-send-icon { position:absolute; right:0; bottom:calc(100% + 16px); color:#243029; background:#d4ded7; }
+    .queue-send-icon[hidden] { display:none; }
+    #send { touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
+    .composer-icon-button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; }
+    .composer-add { position:relative; flex:none; }
+    .composer-add-menu[hidden], .composer-add-option[hidden] { display:none; }
+    #addMenuTrigger { background:transparent; border-radius:0; }
+    .composer-add-menu { position:absolute; z-index:24; bottom:calc(100% + 8px); left:0; display:grid; min-width:168px; gap:3px; padding:6px; border:1px solid #465149; border-radius:11px; color:#dce3de; background:#252d28; box-shadow:0 10px 28px #0007; }
+    .composer-add-option { display:flex; align-items:center; gap:9px; width:100%; min-height:36px; padding:7px 9px; border:0; border-radius:7px; color:inherit; background:transparent; font-size:12px; text-align:left; white-space:nowrap; }
+    .composer-add-option .codex-icon { width:17px; height:17px; }
+    .composer-add-option:hover { background:#ffffff10; }
+    .composer-add-option:disabled { opacity:.45; }
+    .voice-icon { color: #cbd3ce; background: transparent; }
+    .voice-icon:hover { background:transparent; }
+    .voice-icon .codex-icon { width: 20px; height: 20px; }
+    .voice-icon:disabled { cursor: default; color: #8b958f; opacity: .72; }
+    .send-icon { width:26px; height:26px; border:1px solid #ffffff8f; color:#111512; background:#f2f5f3; box-shadow:0 2px 8px #0005; transition:transform .12s ease, background-color .12s ease, box-shadow .12s ease; }
+    .send-icon .codex-icon { width:20px; height:20px; stroke-width:2.15; }
+    .send-icon:hover { background:#fff; box-shadow:0 3px 10px #0006; }
+    .send-icon:active { transform:scale(.94); box-shadow:0 1px 4px #0005; }
+    .send-icon:disabled { opacity:.46; box-shadow:none; }
+    .queue-send-icon:hover { background:#e2e9e4; }
+    .image-viewer { max-width: min(94vw, 1200px); max-height: 92vh; padding: 0; border: 0; background: transparent; overflow: visible; }
+    .image-viewer::backdrop { background: #000c; backdrop-filter: blur(3px); }
+    .image-viewer-shell { position: relative; display: grid; place-items: center; max-width: 94vw; max-height: 92vh; }
+    .image-viewer img { display: block; max-width: 94vw; max-height: 92vh; border-radius: 8px; object-fit: contain; box-shadow: 0 18px 60px #000a; }
+    .image-viewer-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; padding: 0; border-radius: 50%; border-color: #ffffff55; background: #101311cc; font-size: 20px; line-height: 1; }
+    .new-chat-entry { display:flex; flex:none; align-items:center; gap:10px; margin:8px 0; padding:10px 8px; border:0; background:transparent; color:inherit; text-align:left; }
+    #newThreadWelcome[hidden], #newThreadProjectBar[hidden], #timeline[hidden], .selected-heading[hidden] { display:none; }
+    .new-thread-welcome { flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:24px; align-items:center; justify-content:center; padding:24px 12px; }
+    .new-thread-title { margin:0; font-size:clamp(20px, 2.3vw, 28px); font-weight:500; text-align:center; overflow-wrap:anywhere; }
+    #newThreadIcon svg { display:block; width:56px; height:56px; opacity:.3; }
+    .new-thread-project { display:flex; align-items:center; gap:24px; margin:0 12px; padding:6px 12px; color:inherit; font-size:12px; background:#1b211d; border-radius:14px 14px 0 0; }
+    #newThreadProjectName { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+    #clearNewThreadProject { flex:none; width:24px; height:24px; padding:0; border:0; background:transparent; color:inherit; font-size:18px; }
+    #clearNewThreadProject[hidden] { display:none; }
+
+
+    @media (max-width: 760px) {
+      header { gap: 8px; padding: 8px 12px; }
+      header h1 { font-size: 14px; }
+      .sub { font-size: 10px; }
+      main { grid-template-columns: 1fr; grid-template-rows: minmax(150px, 34%) minmax(0, 1fr); }
+      aside { border-right: 0; border-bottom: 1px solid #2c3830; }
+      section { padding: 14px; }
+      .scroll-to-bottom { right: 24px; bottom: 114px; }
+    }
+    body.embedded-client { min-height:0; height:100%; background:#101311; }
+    .embedded-client header { display:none; }
+    .embedded-client.native-title .selected-heading { display:none; }
+    #connectionStatus { flex:none; font-size:12px; color:#42d17b; }
+    #connectionStatus.failed { color:#e06c64; }
+    .sidebar-brand { display:none; }
+    .embedded-client .sidebar-brand { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:1px 8px 3px; font-size:18px; font-weight:600; }
+    .embedded-client .new-chat-entry { margin:0; padding:5px 8px; font-size:12px; }
+    .embedded-client .toolbar { min-height:20px; margin:0 4px 1px; }
+    .embedded-client .project { margin-bottom:1px; }
+    .embedded-client .task { margin:0; padding:4px 9px; }
+    @media (max-width:760px) {
+      .composer-row { min-width:0; }
+      .composer-controls { flex:0 1 auto; min-width:0; }
+      .model-control { flex:0 1 auto; }
+      .model-trigger { width:100%; max-width:100%; min-width:0; gap:3px; padding:0; }
+      .model-trigger .chevron { flex-shrink:0; }
+      .context-meter { width:14px; height:14px; }
+      .model-trigger .chevron, .model-trigger .chevron .codex-icon, .model-fast-indicator .codex-icon { width:12px; height:12px; }
+    }
+    @container composer (max-width:310px) {
+      #permissionLabel { display:none; }
+      .permission-trigger { width:26px; padding:0; justify-content:center; }
+    }
+    .embedded-client .status { margin-left:0; overflow:hidden; }
+    .embedded-client #status { overflow:hidden; text-overflow:ellipsis; }
+    .embedded-client .project-actions { opacity:1; pointer-events:auto; }
+    #connectionSettings, #usageButton, #returnToComputer, #debugMenu, .app-actions { display:none; }
+    .embedded-client .app-actions { position:relative; display:flex; align-items:stretch; gap:4px; flex-shrink:0; min-width:0; }
+    .embedded-client .app-actions > :is(#returnToComputer:not([hidden]), #debugMenu:not([hidden])) { flex:1 1 0; min-width:0; width:auto; }
+    .embedded-client #debugMenu:not([hidden]) { position:static; display:block; }
+    #debugMenu > summary { display:flex; align-items:center; gap:9px; height:100%; box-sizing:border-box; padding:5px 8px; color:var(--muted, #94a79a); font-size:12px; cursor:pointer; list-style:none; }
+    #debugMenu > summary::-webkit-details-marker { display:none; }
+    #debugMenu > summary > span { flex:1; text-align:right; }
+    #debugMenu[open] .debug-chevron { transform:rotate(90deg); }
+    .debug-menu-items { position:absolute; z-index:30; right:0; bottom:calc(100% + 4px); box-sizing:border-box; width:260px; display:grid; gap:4px; padding:8px; border:1px solid #414a44; border-radius:10px; background:#202522; box-shadow:0 12px 32px #0008; }
+    .debug-menu-items > button { width:100%; padding:8px; border:0; background:transparent; text-align:left; }
+    #sharedRecoveryConfirm, #sharedRecoveryResult { font-size:12px; line-height:1.5; overflow-wrap:anywhere; color:var(--muted, #94a79a); }
+    #sharedRecoveryConfirm button { width:100%; margin-top:6px; text-align:left; }
+    .embedded-client aside { display:flex; flex-direction:column; overflow:hidden; padding:2px 8px 6px; font-size:12px; }
+    .embedded-client #tasks { flex:1; min-height:0; overflow-y:auto; overflow-anchor:none; }
+    .embedded-client :is(#connectionSettings, #usageButton, #archivedThreads:not([hidden]), #returnToComputer:not([hidden])) { display:flex; align-items:center; gap:9px; flex-shrink:0; width:100%; padding:5px 8px; border:0; border-radius:0; background:transparent; color:#9eaca3; text-align:left; font-size:12px; }
+    .embedded-client #archivedThreads { margin-top:3px; padding-top:5px; border-top:1px solid #ffffff12; }
+    .embedded-client #usageButton { margin-top:0; }
+    .embedded-client #archivedThreads[hidden] + #usageButton { margin-top:3px; padding-top:5px; border-top:1px solid #ffffff12; }
+    .shared-service-notice { display:none; }
+    .embedded-client .shared-service-notice:not([hidden]) { display:grid; grid-template-columns:minmax(0, 1fr) 15px; align-items:center; flex:none; gap:7px; min-width:0; margin:3px 0 2px; padding:8px; border:1px solid #d899494f; border-radius:9px; color:#e5b779; background:#d8994914; cursor:pointer; }
+    .embedded-client .shared-service-copy { display:flex; flex-direction:column; min-width:0; gap:2px; }
+    .embedded-client .shared-service-notice strong { font-size:12px; line-height:1.35; font-weight:650; white-space:normal; overflow-wrap:anywhere; }
+    .embedded-client .shared-service-notice .shared-service-copy > span { color:#c8a77c; font-size:12px; line-height:1.35; white-space:normal; overflow-wrap:anywhere; }
+    .embedded-client .shared-service-notice > .codex-icon { width:15px; height:15px; color:#c8a77c; }
+    #connectionAddress { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+    .connection-control-mode { font-weight:600; }
+    .connection-control-mode.complete { color:#42d17b; }
+    .connection-control-mode.basic { color:#dc9b57; }
+    .embedded-client :is(#connectionSettings, #usageButton, #archivedThreads, #returnToComputer):hover { color:#e8eee9; }
+    #usageButton > span { flex:1; }
+    #usageSummary { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
+    #returnToComputer { margin-top:0; }
+    .usage-heading { display:flex; align-items:center; justify-content:space-between; }
+    .usage-heading strong { color:inherit; font-size:12px; font-weight:600; }
+    .usage-ratio { font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
+    .usage-summary-ratio { font-weight:600; font-variant-numeric:tabular-nums; }
+    .usage-ratio-good { color:#4bb982; }
+    .usage-ratio-low { color:#dc9b57; }
+    .usage-group { display:grid; gap:5px; }
+    .usage-model { color:inherit; font-weight:600; }
+    .usage-plan-row { display:grid; grid-template-columns:minmax(0, 1fr) 84px; gap:12px; }
+    .usage-plan-row { color:#aeb9b2; font-size:12px; }
+    .usage-plan-row > :last-child { text-align:left; }
+    #usagePlan { display:flex; align-items:center; justify-content:flex-end; gap:14px; white-space:nowrap; }
+    .usage-plan-tier { padding:2px 7px; border:1px solid #8885; border-radius:5px; font-size:11px; }
+    .usage-window { display:grid; gap:8px; padding:12px 0; border-top:1px solid #8883; }
+    .usage-window > strong { font-size:13px; }
+    .usage-timeline { --usage-fill:#4bb982; display:grid; gap:6px; padding:1px 0 2px; color:#aeb9b2; }
+    .usage-timeline-ahead { --usage-fill:#dc9b57; }
+    .usage-timeline-summary, .usage-timeline-time-summary { display:flex; align-items:center; justify-content:center; min-width:0; text-align:center; font-size:12px; font-variant-numeric:tabular-nums; }
+    .usage-timeline-summary > span, .usage-timeline-time-summary > span { display:flex; align-items:center; justify-content:center; gap:5px; }
+    .usage-timeline-used::before { width:8px; height:8px; flex:none; border-radius:50%; background:var(--usage-fill); content:""; }
+    .usage-timeline-elapsed::before { width:6px; height:6px; flex:none; border:1px solid #202522aa; border-radius:1px; background:currentColor; transform:rotate(45deg); content:""; }
+    .usage-percentage { font-weight:600; }
+    .usage-timeline-track { position:relative; height:12px; border:1px solid #8885; border-radius:6px; background:#8882; }
+    .usage-timeline-fill { position:absolute; inset:0 auto 0 0; min-width:0; border-radius:5px; background:var(--usage-fill); transition:width .2s ease; }
+    .usage-timeline-tick { position:absolute; z-index:1; top:0; bottom:0; width:1px; background:#20252266; transform:translateX(-.5px); }
+    .usage-timeline-now { position:absolute; z-index:2; top:-5px; bottom:-5px; width:2px; border-radius:1px; background:currentColor; box-shadow:0 0 0 1px #202522aa; transform:translateX(-1px); }
+    .usage-timeline-now::before { position:absolute; top:-1px; left:50%; width:6px; height:6px; border:1px solid #202522aa; background:currentColor; transform:translate(-50%, -50%) rotate(45deg); content:""; }
+    .usage-timeline-scale { position:relative; height:13px; color:#8f9b94; font-size:9px; font-variant-numeric:tabular-nums; line-height:1; }
+    .usage-timeline-scale-label { position:absolute; top:0; white-space:nowrap; transform:translateX(-50%); }
+    .usage-timeline-scale-label.is-first { transform:none; }
+    .usage-timeline-scale-label.is-last { transform:translateX(-100%); }
+    .usage-window-detail { font-size:12px; opacity:.72; line-height:1.5; overflow-wrap:anywhere; }
+    .usage-dialog { width:min(430px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow-y:auto; border:1px solid #414a44; border-radius:14px; padding:0; color:#e7ede9; background:#202522; box-shadow:0 20px 70px #000b; }
+    .usage-dialog::backdrop { background:#0009; backdrop-filter:blur(2px); }
+    .usage-dialog-shell { display:grid; gap:14px; padding:16px; }
+    .usage-dialog-header { display:flex; align-items:center; justify-content:space-between; }
+    .usage-dialog-header h3 { margin:0; font-size:15px; }
+    .usage-dialog-close { width:32px; height:32px; padding:0; border:0; background:transparent; font-size:20px; }
+    #usageRows { display:grid; gap:9px; min-height:18px; color:#aeb9b2; font-size:12px; }
+    @media (prefers-color-scheme:light) {
+      .embedded-client :is(#connectionSettings, #usageButton, #archivedThreads, #returnToComputer) { color:#596c60; }
+      .embedded-client #archivedThreads { border-top-color:#17212b18; }
+      .embedded-client #archivedThreads[hidden] + #usageButton { border-top-color:#17212b18; }
+      .embedded-client .shared-service-notice:not([hidden]) { color:#8b5318; background:#d8994914; border-color:#b66b2c45; }
+      .embedded-client .shared-service-notice .shared-service-copy > span,
+      .embedded-client .shared-service-notice > .codex-icon { color:#76512c; }
+      .embedded-client :is(#connectionSettings, #usageButton, #archivedThreads, #returnToComputer):hover { color:#17212b; }
+      .composer-add-menu { color:#34443a; background:#f5f7f5; border-color:#d5ddd8; box-shadow:0 10px 28px #17212b24; }
+      .file-action-menu { color:#17212b; background:#fff; border-color:#cfd8d2; box-shadow:0 10px 28px #17212b24; }
+      .file-action-name { color:#65736a; border-color:#dce3df; }
+      .file-action-menu > button:hover { background:#17212b0a; }
+      .composer-add-option:hover { background:#17212b0a; }
+      .usage-dialog { color:#17212b; background:#f5f7f5; border-color:#cfd8d2; }
+      .usage-timeline { color:#596c60; }
+      .usage-timeline-tick { background:#f5f7f566; }
+      .usage-timeline-now { box-shadow:0 0 0 1px #f5f7f5cc; }
+      .usage-timeline-now::before { border-color:#f5f7f5cc; }
+      .usage-timeline-elapsed::before { border-color:#f5f7f5cc; }
+      .debug-menu-items { color:#17212b; background:#fff; border-color:#cfd8d2; box-shadow:0 12px 32px #17212b24; }
+    }
+    #sidebarBackdrop { display:none; }
+    #wideSidebarToggle, #wideSidebarExpand { display:none; }
+    #wideSidebarToggle .codex-icon, #wideSidebarExpand .codex-icon { width:24px; height:24px; stroke-width:1.8; }
+    #wideSidebarToggle:hover, #wideSidebarExpand:hover { background:color-mix(in srgb, currentColor 8%, transparent); }
+    .embedded-client #voice[aria-pressed="true"] { width:26px; height:26px; margin-inline:3px; color:#ef6868; background:#ef686814; box-shadow:inset 0 0 0 1px #ef686899; }
+    .embedded-client #voice[aria-pressed="true"] .codex-icon { width:16px; height:16px; }
+    @media (max-width:760px) {
+      .embedded-client main { position:relative; display:grid; grid-template-columns:1fr; grid-template-rows:minmax(0,1fr); }
+      .embedded-client aside { display:none; position:absolute; inset:0 auto 0 0; width:min(90%,320px); z-index:20; box-shadow:12px 0 30px #0008; }
+      .embedded-client.sidebar-open aside { display:flex; }
+      .embedded-client.sidebar-open #sidebarBackdrop { display:block; position:absolute; inset:0; z-index:19; background:#0008; border:0; border-radius:0; }
+      .embedded-client section { padding:8px 12px; }
+      .embedded-client .selected-heading { min-width:0; }
+      .embedded-client textarea { font-size:16px; }
+      .embedded-client #prompt { font-size:13px; }
+    }
+    @media (min-width:600px) {
+      .embedded-client #wideSidebarToggle { display:grid; place-items:center; flex:none; align-self:center; width:40px; height:40px; padding:8px; border:0; background:transparent; color:inherit; }
+      .embedded-client.sidebar-collapsed main { grid-template-columns:minmax(0,1fr); }
+      .embedded-client.sidebar-collapsed aside { display:none; }
+      .embedded-client.sidebar-collapsed #wideSidebarExpand { display:grid; place-items:center; position:absolute; top:2px; left:8px; width:32px; height:28px; padding:2px; border:0; background:transparent; color:inherit; z-index:9; }
+      .embedded-client.sidebar-collapsed .selected-heading { padding-left:36px; }
+      .embedded-client section { padding-top:2px; }
+      .embedded-client.native-layout .selected-heading { display:flex; }
+      .embedded-client.native-layout #selectedTitle { flex:1; }
+      .embedded-client main { grid-template-columns: 280px minmax(0, 1fr); grid-template-rows:minmax(0,1fr); }
+      .embedded-client aside { display:flex; position:static; width:auto; box-shadow:none; border-right:1px solid #2c3830; border-bottom:0; }
+      .embedded-client.sidebar-open #sidebarBackdrop { display:none; }
+    }
+    @media (prefers-color-scheme: light) {
+      :root { color-scheme:light; background:#f5f7fa; color:#17212b; }
+      body, body.embedded-client { background:#f5f7fa; }
+      aside, .composer, .model-menu, .new-thread-project { background:#fff; border-color:#d5ddd8; color:#17212b; }
+      button, select, textarea { color:#17212b; }
+      button { background:#eef2ef; border-color:#ccd6ce; }
+      button:hover { background:#e2e9e4; }
+      textarea, .model-trigger, .voice-icon, .effort-entry, .project-header, .task, .model-option, .queue-action, .project-action { color:#27382e; background:transparent; }
+      .model-trigger[aria-expanded="true"], .model-option:hover, .model-option.selected, .task:hover, .project-header:hover, .effort-entry:hover { background:#e8eeea; }
+      .task.active { background:#dce8e0; }
+      .message.user { background:#dcefe3; border-color:#a4cdb3; }
+      .message.commentary, .process-body .message.commentary, .message-body blockquote { color:#44564b; }
+      .message-body code, .message-body pre, .message-body .code-block { background:#eaf0ec; border-color:#d2dbd5; }
+      .message-body pre code { background:transparent; }
+      .message-body .code-block-header, .message-body .code-block-copy { color:#596c60; }
+      .message-body .code-block-copy:hover { color:#17212b; background:#17212b0a; }
+      .message-body .code-block-copy[data-copy-state="copied"] { color:#17212b; }
+      .message-body .code-block code.hljs, .message-body .hljs-variable, .message-body .hljs-params,
+      .message-body .hljs-property { color:#24372b; }
+      .message-body .hljs-comment, .message-body .hljs-quote { color:#66776c; }
+      .message-body .hljs-keyword, .message-body .hljs-selector-tag, .message-body .hljs-literal,
+      .message-body .hljs-section, .message-body .hljs-link { color:#7b3fb3; }
+      .message-body .hljs-string, .message-body .hljs-doctag, .message-body .hljs-regexp,
+      .message-body .hljs-template-tag, .message-body .hljs-template-variable { color:#397947; }
+      .message-body .hljs-number, .message-body .hljs-symbol, .message-body .hljs-bullet { color:#a15c1c; }
+      .message-body .hljs-title, .message-body .hljs-title.class_, .message-body .hljs-title.function_ { color:#1d64a8; }
+      .message-body .hljs-type, .message-body .hljs-built_in, .message-body .hljs-attribute,
+      .message-body .hljs-selector-attr, .message-body .hljs-selector-class, .message-body .hljs-selector-pseudo { color:#805d05; }
+      .message-body .hljs-meta, .message-body .hljs-meta .hljs-keyword { color:#1f7671; }
+      .message-body .hljs-addition { color:#2f7444; background:#78b98a24; }
+      .message-body .hljs-deletion { color:#a23d3d; background:#d77a7a24; }
+      .message-body a, .process.running > summary { color:#167343; }
+      .activity, .activity-icon, .live-step, .reasoning-history, .turn-label, .turn-duration,
+      .process > summary, .active-process > summary, .settled-process > summary,
+      .toolbar, .refresh-icon, .project-folder, .project-action, .disclosure-chevron,
+      .sub, .status, #empty, .pending-settings, .menu-title, .menu-hint, .model-option small, .chevron { color:#596c60; }
+      .activity-copy { color:#65766b; }
+      .activity-copy:hover { color:#17212b; background:#17212b0a; }
+      .activity-copy[data-copy-state="copied"] { color:#167343; }
+      .command-shell, .tool-detail { border-color:#d2dbd5; background:#f8faf8; color:#27382e; }
+      .command-shell-command, .command-shell-footer, .tool-detail-footer { border-color:#dfe6e1; }
+      .command-shell-prompt { color:#167343; }
+      .command-shell-output pre, .tool-detail-text { color:#27382e; }
+      .command-shell-output pre.empty, .command-shell-footer, .command-shell-status,
+      .tool-detail-heading, .tool-detail-fields dt, .tool-detail-footer, .tool-detail .muted { color:#65766b; }
+      .tool-detail-text { background:#edf2ef; }
+      .tool-detail-section.error { color:#b42318; }
+      .process > summary, .turn-duration, .turn-error, header { border-color:#d5ddd8; }
+      .turn-error { color:#27382e; }
+      .queued-message, .scroll-to-bottom { background:#edf2ef; border-color:#c9d5cd; color:#27382e; }
+      .queued-error, .diff-remove { color:#b42318; }
+      .diff-add { color:#167343; }
+      .send-icon, .send-icon:hover { border-color:#27382e; background:#27382e; color:#fff; box-shadow:0 2px 7px #17212b33; }
+      .queue-send-icon, .queue-send-icon:hover { border-color:#91a097; background:#e0e7e2; color:#27382e; }
+      .context-meter::before { background:#fff; }
+      .context-trigger[aria-expanded="true"] { background:#00000008; }
+      .context-details { background:#fff; color:#27382e; border-color:#d5ddd8; }
+      .model-option .check { color:#27382e; }
+      .menu-divider { background:#d5ddd8; }
+      .effort-rail { background:#dce4de; border-color:#a5b3aa; }
+      :root { --color-chart-purple:#924ff7; }
+      #modelSummaryEffort, .effort-heading { color:#657269; }
+      .effort-heading:hover { background:#00000008; }
+      .effort-bolt:hover { background:#00000008; }
+      .permission-menu { background:#fff; border-color:#d5ddd8; }
+      .permission-option { color:#27382e; }
+      .permission-trigger, .permission-menu-title, .permission-option small { color:#657269; }
+      .permission-option:hover, .permission-trigger:hover, .permission-trigger[aria-expanded="true"] { background:#00000008; }
+      .permission-trigger.full-access, .permission-option[data-permission="full"], .permission-option[data-permission="full"] small { color:#bd5b16; }
+      .attachment { color:#44564b; border-color:#b7c9be; }
+      .image-viewer-close { color:#fff; background:#101311cc; }
+    }
+  
+
+    #connectionEntry { display:none; }
+    body.connection-entry > header, body.connection-entry > main { display:none; }
+    body.connection-entry #connectionEntry { display:flex; flex:1; align-items:center; justify-content:center; padding:24px; overflow:auto; }
+    .connection-entry-card { width:100%; max-width:420px; }
+    .connection-entry-card h1 { font-size:24px; }
+    #entryMode { opacity:.65; }
+    #entryStatus { white-space:pre-wrap; overflow-wrap:anywhere; }
+    .connection-entry-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
+
+    #externalUiOption { align-items:center; justify-content:flex-start; gap:8px; flex-shrink:0; padding:8px; font-size:12px; color:var(--muted, #94a79a); }
+    #externalUiOption:not([hidden]) { display:flex; }
+    #externalUiOption[data-active-page="builtin"] > span:first-child,
+    #externalUiOption[data-active-page="debug"] > span:last-child { color:#73dfa3; font-weight:600; }
+    #externalUiToggle { position:relative; width:34px; height:20px; flex:none; margin:0; border:1px solid #6d7971; border-radius:10px; appearance:none; -webkit-appearance:none; background:#303833; transition:background-color .15s, border-color .15s; }
+    #externalUiToggle::after { content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#d8dfda; transition:transform .15s; }
+    #externalUiToggle:checked { border-color:#48c985; background:#2f7650; }
+    #externalUiToggle:checked::after { transform:translateX(14px); background:#fff; }
+    #externalUiToggle:disabled { opacity:.55; }
+
+    .model-menu[data-loading="true"] .menu-view { visibility:hidden; }
+    .model-menu[data-loading="true"]::before { content:"正在读取模型设置…"; position:absolute; inset:0; display:grid; place-items:center; font-size:13px; color:inherit; }
+
+    .entry-brand { font-size:12px; letter-spacing:.08em; opacity:.65; }
+    .connection-entry-card { padding:24px; border:1px solid #ffffff18; border-radius:20px; background:#ffffff05; }
+    .connection-entry-card h1 { margin:10px 0; }
+    .entry-steps { display:flex; gap:8px; padding:0; margin:24px 0; list-style:none; }
+    .entry-steps[hidden] { display:none; }
+    .entry-steps li { flex:1; padding-top:10px; border-top:3px solid #7e898544; font-size:11px; opacity:.5; }
+    .entry-steps li[data-state="current"] { border-color:#55bf8b; opacity:1; }
+    .entry-steps li[data-state="done"] { border-color:#55bf8b; opacity:.7; }
+    .entry-progress { display:flex; align-items:flex-start; gap:12px; margin-top:24px; min-height:94px; }
+    .entry-indicator { flex:none; width:18px; height:18px; margin-top:3px; border:2px solid #7e898544; border-top-color:#55bf8b; border-radius:50%; animation:entry-spin 1s linear infinite; }
+    #entryStatus { margin:0 0 8px; font-size:16px; font-weight:600; }
+    #entryDetail { margin:0; font-size:13px; line-height:1.7; opacity:.7; overflow-wrap:anywhere; }
+    .entry-progress[data-state="error"] .entry-indicator { animation:none; border-color:#e58a78; }
+    .connection-entry-actions button { min-height:42px; }
+    .diagnostic-overview { font-size:17px; font-weight:600; margin-bottom:0; }
+    .diagnostic-hint { opacity:.7; line-height:1.6; }
+    .usage-dialog details summary { cursor:pointer; padding:10px 0; }
+    @keyframes entry-spin { to { transform:rotate(360deg); } }
+    @media(prefers-reduced-motion:reduce) { .entry-indicator { animation:none; } }
+    @media(prefers-color-scheme:light) { .connection-entry-card { background:#fff; border-color:#d5ddd8; } }
+
+    .approval-panel { flex: 0 1 auto; min-height: 0; max-height: 42vh; overflow-y: auto; padding: 8px 12px; border-top: 1px solid #45564b; }
+    .approval-panel[hidden] { display: none; }
+    .approval-card { padding: 10px; border: 1px solid #8883; border-radius: 10px; background: transparent; margin-bottom: 6px; }
+    .approval-card p { margin: 6px 0; font-size: 12px; }
+    .approval-meta { color:var(--muted, #94a79a); overflow-wrap:anywhere; }
+    .approval-card strong { display:block; font-size:14px; font-weight:600; overflow-wrap:anywhere; }
+    .approval-card .approval-kind { margin:0 0 4px; opacity:.7; font-size:11px; }
+    .approval-body { min-width:0; overflow-wrap:anywhere; }
+    .approval-scope-option { width:100%; padding:6px 0; border-top:1px solid #63774b55; }
+    .approval-scope-option p { white-space:pre-wrap; overflow-wrap:anywhere; }
+    .approval-card pre { margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.5 monospace; max-height: 18vh; overflow-y: auto; }
+    .approval-details { width: 100%; min-width: 0; margin: 6px 0; }
+    .approval-details summary { cursor: pointer; font-size: 12px; }
+    .approval-details-title::after { content: ' · 展开'; opacity: .7; }
+    .approval-details[open] .approval-details-title::after { content: ' · 收起'; }
+    .approval-preview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.5 monospace; margin-top: 4px; }
+    .approval-details[open] .approval-preview { display: none; }
+    .approval-card form { display: flex; flex-wrap: wrap; gap: 8px; }
+    .approval-card label, .approval-card form pre { width: 100%; }
+    .approval-card input { display: block; width: 100%; }
+    .approval-card button { min-height: 32px; padding: 5px 9px; border: 1px solid #8884; border-radius: 6px; background: transparent; color: inherit; font-size: 12px; }
+    .approval-card button:hover:not(:disabled) { background: #8881; border-color: #8887; }
+    .approval-actions { display: flex; flex-wrap: nowrap; gap: 6px; width: 100%; overflow-x: auto; padding: 3px 0; }
+    .approval-actions button { flex: 0 0 auto; white-space: nowrap; }