@spzxg/cli-ui 0.6.6 → 0.6.8

package/src/operator.base.css

@@ -606,9 +606,10 @@ button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:n
 /* Wrapper exists so the nav cluster anchors to the transcript's bottom edge —
    i.e. always just above the composer, however tall the composer grows. */
 .transcript-wrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;}
-.msg-nav{position:absolute;right:18px;bottom:12px;z-index:5;display:flex;flex-direction:column;gap:6px;}
-.msg-nav-btn{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--ink-2);box-shadow:0 4px 14px rgba(0,0,0,.18);cursor:pointer;transition:transform .12s ease,background .12s ease;}
-.msg-nav-btn:hover{background:var(--surface-2);transform:translateY(-1px);}
+.msg-nav{position:absolute;right:14px;bottom:12px;z-index:5;display:flex;flex-direction:column;gap:2px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:0 2px 10px rgba(0,0,0,.06);}
+.msg-nav-btn{width:32px;height:32px;border-radius:6px;display:grid;place-items:center;background:transparent;color:var(--ink-3);cursor:pointer;transition:background .12s ease;}
+.msg-nav-btn:hover{background:var(--surface-2);color:var(--ink);}
+.msg-nav-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
 .msg-nav-btn svg{width:16px;height:16px;}
 
 /* ===== workspace split: transcript beside the DIFF/PREVIEW/CONTEXT rail ===== */
@@ -616,9 +617,10 @@ button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:n
    driven by an inline gridTemplateColumns from layout state (resizable); the
    --col-rail value here is only the SSR/fallback default. */
 .sess-split{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 0px var(--col-rail);}
-.sess-main{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--line);}
-.sess-rail{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--bg-2);}
-.rail-tabs{flex:0 0 auto;display:flex;gap:2px;padding:0 14px;border-bottom:1px solid var(--line);}
+.sess-main{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--line-2);}
+.sess-split>.sess-main + .col-rail.rail-right{border-left:0;}
+.sess-rail{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--bg-2);container-type:inline-size;}
+.rail-tabs{flex:0 0 auto;display:flex;gap:2px;padding:0 14px;border-bottom:1px solid var(--line-2);}
 .rail-tab{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-4);background:transparent;border:none;border-bottom:2px solid transparent;padding:14px 13px 12px;cursor:pointer;transition:color .12s;}
 .rail-tab.on{color:var(--ink);border-bottom-color:var(--accent);}
 .rail-tab:not(.on):hover{color:var(--ink-2);}
@@ -671,7 +673,7 @@ button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:n
 .ctxw-desc{font-family:var(--mono);font-size:11px;color:var(--ink-3);line-height:1.6;margin-top:4px;}
 .ctxw-clear{width:100%;justify-content:center;margin-top:20px;}
 .ctxw-foot{margin-top:12px;font-family:var(--mono);font-size:10px;line-height:1.7;color:var(--ink-4);text-align:center;}
-.sess-head{flex:0 0 auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:60px;padding:11px 18px;border-bottom:1px solid var(--line);background:var(--surface);}
+.sess-head{flex:0 0 auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:60px;padding:11px 18px;border-bottom:1px solid var(--line-2);background:var(--surface);}
 .sess-head .sh-main{min-width:150px;flex:1;}
 .sess-head .crumb{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px;}
 .sess-head .crumb .sep{opacity:.5;}
@@ -790,7 +792,7 @@ a.tc-btn{display:inline-flex;align-items:center;text-decoration:none;line-height
 .transcript{flex:1;overflow-y:auto;padding:26px 0 18px;}
 .tw{max-width:760px;margin:0 auto;padding:0 28px;}
 .msg{margin-bottom:22px;}
-.msg .who{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px;}
+.msg .who{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:500;color:var(--ink-3);margin-bottom:9px;}
 .msg .who .badge{font-size:9px;padding:1px 5px;border-radius:4px;background:var(--surface-2);color:var(--ink-3);letter-spacing:.04em;}
 .msg .who .msg-time{font-weight:400;letter-spacing:.03em;text-transform:none;color:var(--ink-3);opacity:.75;}
 .msg .who .av{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;color:#fff;font-size:10px;}
@@ -806,15 +808,15 @@ a.tc-btn{display:inline-flex;align-items:center;text-decoration:none;line-height
 .msg .who .av.cc.codex{color:var(--ink);}
 .msg .who .av svg{width:11px;height:11px;}
 .msg .who .av.cc svg{width:16px;height:16px;}
-.msg-body{font-size:14px;line-height:1.6;color:var(--ink);}
+.msg-body{font-size:15px;line-height:1.75;color:var(--ink);}
 .msg-body p{margin:0 0 10px;}
 .msg-body p:last-child{margin-bottom:0;}
 .msg-body code{font-family:var(--mono);font-size:12.5px;background:var(--surface-2);border:1px solid var(--line-2);padding:1px 5px;border-radius:5px;color:var(--accent-ink);}
 [data-theme="dark"] .msg-body code{color:#E0A07F;}
 .msg-body strong{font-weight:700;}
 
-.msg.user .msg-body{background:var(--accent-soft);border:1px solid rgba(194,96,60,.2);border-radius:var(--r-lg);padding:13px 15px;}
-.msg.user.initial .msg-body{background:var(--surface);border:1px solid var(--accent);box-shadow:var(--sh-1);}
+.msg.user .msg-body{background:var(--surface-2);border:1px solid var(--line-2);border-radius:16px;padding:14px 16px;}
+.msg.user.initial .msg-body{background:var(--surface);border-color:var(--line);}
 /* queued follow-up: a dimmed user bubble waiting its turn, with a cancel × */
 .msg.user.queued{opacity:.62;}
 .msg.user.queued .msg-body{background:var(--surface-2);border:1px dashed var(--line-2);position:relative;padding-right:34px;}
@@ -827,7 +829,8 @@ a.tc-btn{display:inline-flex;align-items:center;text-decoration:none;line-height
 
 /* tool call block (expandable) */
 .tool{font-family:var(--mono);font-size:12px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--surface-2);overflow:hidden;}
-.tool-h{display:flex;align-items:center;gap:8px;padding:8px 12px;color:var(--ink-2);width:100%;text-align:left;font-family:var(--mono);font-size:12px;}
+.tool-h{display:flex;align-items:center;gap:8px;padding:9px 12px;min-height:38px;color:var(--ink-2);width:100%;text-align:left;font-family:var(--mono);font-size:12px;}
+.tool-h:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;}
 .tool-h:hover{background:var(--panel-2);}
 .tool-h .tchev{flex:0 0 auto;color:var(--ink-4);display:inline-flex;transition:transform .14s;}
 .tool-h .tchev svg{width:13px;height:13px;}
@@ -910,16 +913,16 @@ button.tpeek-more:hover{color:var(--accent-ink);}
 .md li{margin-bottom:4px;}
 .md li::marker{color:var(--ink-3);}
 .md h1,.md h2,.md h3,.md h4{margin:16px 0 8px;font-weight:700;letter-spacing:-.01em;line-height:1.3;}
-.md h1{font-size:18px;}
-.md h2{font-size:16px;}
-.md h3{font-size:14.5px;}
+.md h1{font-size:20px;}
+.md h2{font-size:18px;}
+.md h3{font-size:16px;}
 .md h4{font-size:13px;}
 .md code{font-family:var(--mono);font-size:12.5px;background:var(--surface-2);border:1px solid var(--line-2);padding:1px 5px;border-radius:5px;color:var(--accent-ink);}
 [data-theme="dark"] .md code{color:#E0A07F;}
 .md pre{margin:0 0 12px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r);padding:12px 14px;overflow-x:auto;}
 .md pre code{display:block;background:none;border:none;padding:0;color:var(--ink);font-size:12.5px;line-height:1.55;}
-.md blockquote{margin:8px 0;padding:2px 0 2px 14px;border-left:3px solid var(--line-strong);color:var(--ink-2);}
-.md hr{border:none;border-top:1px solid var(--line);margin:14px 0;}
+.md blockquote{margin:12px 0;padding:4px 0 4px 14px;border-left:2px solid var(--line);color:var(--ink-2);}
+.md hr{border:none;border-top:1px solid var(--line-2);margin:14px 0;}
 .md table{border-collapse:collapse;margin:8px 0;font-size:13px;width:100%;}
 .md th,.md td{border:1px solid var(--line-2);padding:6px 10px;text-align:left;}
 .md th{background:var(--surface-2);font-weight:700;}
@@ -973,7 +976,7 @@ button.tpeek-more:hover{color:var(--accent-ink);}
 .sbreak .card .ct b{color:var(--ink);}
 
 .session-label{display:flex;align-items:center;gap:9px;margin:0 0 20px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);}
-.session-label .ln{flex:1;height:1px;background:var(--line);}
+.session-label .ln{flex:1;height:1px;background:var(--line-2);}
 
 /* windowed transcript: reveal earlier rows */
 .load-older{display:flex;justify-content:center;margin:0 0 18px;}
@@ -1013,7 +1016,7 @@ button.tpeek-more:hover{color:var(--accent-ink);}
 .comp-box{border:1px solid var(--line-strong);border-radius:24px;background:var(--raise);box-shadow:0 4px 20px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s;overflow:hidden;}
 .comp-box:focus-within{border-color:var(--ink-4);box-shadow:0 4px 24px rgba(0,0,0,.07);}
 .comp-area{padding:18px 20px 8px;}
-.comp-area textarea{display:block;width:100%;min-width:0;border:none;background:none;resize:none;outline:none;font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink);max-height:200px;min-height:62px;}
+.comp-area textarea{display:block;width:100%;min-width:0;padding:0;border:none;background:none;resize:none;outline:none;font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink);min-height:3.2em;max-height:12.8em;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior:contain;}
 .comp-area textarea::placeholder{color:var(--ink-4);}
 .comp-toolbar{display:flex;align-items:center;gap:7px;padding:4px 12px 12px;min-width:0;}
 .comp-add{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;flex:none;color:var(--ink-2);background:transparent;}
@@ -1025,13 +1028,16 @@ button.tpeek-more:hover{color:var(--accent-ink);}
 .comp-setting svg{width:14px;height:14px;}
 .comp-setting.elevated{color:var(--amber);}
 .comp-model-name{min-width:0;max-width:220px;overflow:hidden;text-overflow:ellipsis;}
-.comp-reasoning{color:var(--ink-3);font-size:11px;}
 .comp-setting:disabled,.comp-add:disabled{opacity:.5;cursor:default;}
-.send{width:36px;height:36px;flex:none;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;transition:filter .12s,opacity .12s;}
-.send:hover{filter:brightness(1.07);}
-.send:disabled{opacity:.35;cursor:default;filter:none;}
-.send.stop{background:var(--blue);color:#fff;}
+.send{width:44px;height:44px;min-width:44px;min-height:44px;flex:none;padding:0;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;transition:filter .12s,opacity .12s,transform .12s;}
+.send:hover:not(:disabled){filter:brightness(1.08);}
+.send:active:not(:disabled){transform:scale(.96);filter:brightness(.94);}
+.send:disabled{opacity:.35;cursor:not-allowed;filter:none;}
+.send[aria-busy="true"]{opacity:.7;cursor:progress;}
+.send.stop{background:var(--blue);color:var(--on-accent);}
 .send.stop svg{fill:currentColor;width:15px;height:15px;}
+.send .spinner{width:18px;height:18px;border-color:color-mix(in srgb,currentColor 30%,transparent);border-top-color:currentColor;}
+@media(prefers-reduced-motion:reduce){.send{transition:none;}.send .spinner{animation:none;}}
 /* mid-turn: queue button + stop button sit side by side */
 .send-group{display:flex;align-items:flex-end;gap:8px;flex:0 0 auto;}
 .send svg{width:17px;height:17px;}
@@ -1052,16 +1058,9 @@ button.tpeek-more:hover{color:var(--accent-ink);}
 
 .send-group{display:flex;align-items:center;gap:6px;flex:none;}
 .send svg{width:19px;height:19px;}
-.comp-caption{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px;padding:8px 6px 0;font-size:10px;color:var(--ink-4);}
-.comp-caption button{display:flex;align-items:center;gap:4px;background:transparent;color:var(--ink-3);font-size:10px;}
-.comp-caption button:disabled{opacity:.45;cursor:default;}
 .comp-error,.control-error{padding:8px 10px;font-size:12px;line-height:1.5;color:var(--red);overflow-wrap:anywhere;}
 .comp-upload-status{padding:6px 10px;font-size:11px;color:var(--ink-3);}
-.comp-quote{display:flex;align-items:flex-start;gap:10px;margin:12px 14px 0;padding:10px 12px;border-left:3px solid var(--accent);border-radius:5px 12px 12px 5px;background:var(--surface-2);font-size:12px;}
-.comp-quote>div{flex:1;min-width:0;}
-.comp-quote strong{font-weight:500;color:var(--ink-2);}
-.comp-quote p{margin:4px 0 0;color:var(--ink-3);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;white-space:pre-wrap;}
-.comp-quote .icon-btn{width:24px;height:24px;flex:none;}
+.comp-quote{margin:12px 14px 0;}
 .hero-controls{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);}
 .hero-controls .comp-model{margin-left:0;}
 .compact-chat{flex:1;}
@@ -1070,7 +1069,8 @@ button.tpeek-more:hover{color:var(--accent-ink);}
 .compact-session .sess-head{flex-wrap:wrap;}
 .compact-session .sh-tools{flex-wrap:wrap;}
 .msg-actions{display:flex;margin-top:6px;}
-.msg-actions button{display:flex;align-items:center;gap:4px;padding:4px 6px;border-radius:6px;background:transparent;font-size:11px;color:var(--ink-4);}
+.msg-actions button{display:flex;align-items:center;gap:5px;min-height:32px;padding:5px 8px;border-radius:6px;background:transparent;font-size:12px;color:var(--ink-3);}
+.msg-actions button svg{width:14px;height:14px;}
 .msg-actions button:hover,.msg-actions button:focus-visible{background:var(--surface-2);color:var(--ink);}
 .msg-body{overflow-wrap:anywhere;min-width:0;}
 button.pop-item{width:100%;text-align:left;background:transparent;color:var(--ink);font:inherit;}
@@ -1084,7 +1084,6 @@ button.pop-item:hover{background:var(--surface-2);}
   .comp-setting{font-size:11px;padding:5px;gap:4px;}
   .comp-model-name{max-width:145px;}
   .comp-area{padding:14px 16px 6px;}
-  .comp-caption{font-size:9px;}
 }
 @container (max-width:310px){
   .comp-control:has(.permission){flex:1;}
@@ -1353,10 +1352,111 @@ button.pop-item:hover{background:var(--surface-2);}
 .pop-item .pi-check svg{width:14px;height:14px;}
 .pop-item .pi-sub{font-family:var(--mono);font-size:10px;color:var(--ink-3);font-weight:400;}
 .pop-sec{padding:8px 13px 4px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);}
-.pop-custom-model{border-top:1px solid var(--line);padding-bottom:10px;}
+.pop-custom-model{border-top:1px solid var(--line-2);padding-bottom:10px;}
 .pop-custom-row{display:flex;gap:7px;padding:5px 10px;}
 .pop-custom-row input{min-width:260px;flex:1;font-size:11px;}
 .pop-custom-model>.pi-sub{max-width:360px;padding:0 11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.run-agent-list{width:260px;max-width:100%;}
+.run-agent-option{min-height:44px;}
+.run-agent-trailing{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--ink-3);}
+.run-agent-trailing svg{width:14px;height:14px;}
+.run-settings{width:320px;max-width:100%;}
+.run-settings-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line-2);}
+.run-settings-head .run-settings-back{width:auto;font-size:12px;}
+.run-settings-back svg{width:14px;height:14px;}
+.run-settings-field{padding:4px 2px 10px;}
+.run-settings-note{margin:6px 0 0;font-size:11px;line-height:1.5;color:var(--ink-3);overflow-wrap:anywhere;}
+.run-settings .pop-custom-row input{width:100%;min-height:38px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;}
+.run-settings .pop-custom-row button{min-height:38px;}
+/* Composer menus share one card treatment without changing task or board menus. */
+.popover.composer-popover{--composer-reasoning:var(--operator);width:348px;padding:8px;border-radius:20px;border-color:var(--line-strong);background:var(--raise);box-shadow:0 12px 40px rgba(0,0,0,.16),0 2px 8px rgba(0,0,0,.06);}
+[data-theme="light"] .composer-popover{--composer-reasoning:#7c3aed;}
+.composer-menu-heading{padding:8px 10px 10px;font-size:12px;font-weight:500;color:var(--ink-3);}
+.composer-menu-note{margin:0;padding:0 10px 10px;color:var(--ink-3);font-size:11px;line-height:1.5;}
+.composer-popover .composer-option{display:flex;align-items:center;text-align:left;width:100%;min-height:56px;gap:11px;padding:11px 10px;border-radius:12px;font-size:14px;line-height:1.4;}
+.composer-popover .composer-option:hover:not(:disabled),.composer-popover .composer-option[aria-pressed="true"]{background:var(--surface-2);}
+.composer-option-icon{display:grid;place-items:center;flex:none;width:24px;height:26px;color:var(--ink-3);}
+.composer-option-icon svg{width:19px;height:19px;}
+.composer-option-copy{display:block;flex:1;min-width:0;}
+.composer-option-title{display:block;color:var(--ink);font-size:14px;font-weight:500;overflow-wrap:anywhere;}
+.composer-option-sub{display:block;margin-top:3px;color:var(--ink-3);font-size:12px;font-weight:400;line-height:1.45;overflow-wrap:anywhere;}
+.composer-option-trailing{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none;color:var(--accent);}
+.composer-option-trailing svg{width:16px;height:16px;}
+.composer-menu-key{color:var(--ink-4);font-size:12px;}
+.composer-popover .pop-sec{padding:8px 10px;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;}
+.composer-popover .run-agent-list,.composer-popover .run-settings{width:auto;max-width:none;}
+.composer-popover .run-settings-head{margin:0 2px 10px;padding-bottom:4px;}
+.composer-popover .run-settings-back{min-height:40px;border-radius:10px;font-size:13px;}
+.composer-popover .run-models-back{display:flex;align-items:center;gap:8px;width:auto;min-height:40px;border-radius:10px;font-size:13px;}
+.run-models-back svg{width:14px;height:14px;}
+.run-field-label{display:block;color:var(--ink-3);font-size:12px;font-weight:500;padding:0 8px 8px;}
+.composer-popover .run-model-entry{border:1px solid var(--line);background:var(--surface);}
+.run-model-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.run-model-list{max-height:min(46vh,320px);overflow-y:auto;overscroll-behavior:contain;}
+.run-model-group-title{padding:12px 10px 4px;color:var(--ink-3);font-size:11px;}
+.run-reasoning-card{margin:4px 2px 10px;padding:14px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,color-mix(in srgb,var(--composer-reasoning) 8%,var(--raise)),var(--raise) 80%);}
+.run-reasoning-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
+.run-reasoning-head .run-field-label{padding:0;}
+.run-reasoning-value{min-width:0;color:var(--composer-reasoning);font-size:18px;font-weight:600;overflow-wrap:anywhere;text-align:right;}
+.run-reasoning-note{margin:8px 0 14px;color:var(--ink-3);font-size:12px;line-height:1.5;}
+.run-reasoning-options{display:flex;flex-wrap:wrap;gap:5px;}
+.run-reasoning-option{flex:1 1 60px;min-height:38px;padding:7px 8px;border:1px solid var(--line);border-radius:9px;background:var(--raise);color:var(--ink-2);font-size:12px;line-height:1.3;overflow-wrap:anywhere;}
+.run-reasoning-option:hover:not(:disabled){border-color:var(--composer-reasoning);}
+.run-reasoning-option[aria-pressed="true"]{background:var(--composer-reasoning);border-color:transparent;color:var(--raise);font-weight:600;}
+.run-reasoning-option:disabled,.run-reasoning-reset:disabled{opacity:.5;cursor:default;}
+.run-reasoning-reset{display:flex;justify-content:center;align-items:center;gap:6px;width:100%;min-height:36px;margin-top:10px;padding:6px;border-radius:9px;color:var(--ink-3);font-size:12px;}
+.run-reasoning-reset svg{width:14px;height:14px;}
+.run-reasoning-reset:hover:not(:disabled),.run-reasoning-reset[aria-pressed="true"]{color:var(--composer-reasoning);background:color-mix(in srgb,var(--composer-reasoning) 8%,transparent);}
+.run-settings .pop-custom-model{padding-top:8px;}
+.run-settings .pop-custom-model>.composer-menu-heading{display:block;padding-bottom:4px;}
+.run-settings .pop-custom-row input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
+.composer-popover .control-error{margin:4px 2px;border-radius:10px;background:var(--red-soft);}
+.comp-add.on{color:var(--ink);}
+.comp-add.on svg{transform:rotate(45deg);}
+.composer .comp-setting{min-height:38px;border-radius:6px;padding:7px 10px;background:transparent;}
+.composer .comp-add{width:38px;height:38px;border-radius:6px;background:transparent;}
+.composer .comp-setting:hover:not(:disabled),.composer .comp-add:hover:not(:disabled){background:var(--surface-2);}
+.composer .send{width:44px;height:44px;}
+.composer .comp-box{border-radius:26px;border-color:var(--line);box-shadow:0 4px 20px rgba(0,0,0,.035);}
+.composer .comp-box:focus-within{border-color:var(--line-strong);box-shadow:0 6px 24px rgba(0,0,0,.055);}
+.composer .comp-toolbar{gap:6px;padding:6px 12px 12px;}
+.composer .comp-area{padding:18px 20px 12px;}
+.composer .attach-chip.image{width:108px;height:88px;border-radius:12px;}
+.composer .attach-chip.image>img{height:100%;object-fit:cover;}
+.composer .attach-chip .attach-x{width:26px;height:26px;top:4px;right:4px;font-size:16px;}
+.composer .attach-chip.file{border-radius:10px;}
+.composer .attach-row{gap:10px;padding:14px 16px 4px;flex-wrap:nowrap;overflow-x:auto;}
+.composer .attach-row .attach-chip{flex:none;}
+.composer .cli-blocks{max-height:min(30vh,180px);}
+@container(max-width:420px){
+  .composer .comp-area{padding:14px 16px 8px;}
+  .composer .comp-toolbar{gap:4px;padding:6px 10px 10px;}
+  .composer .comp-setting{padding:6px 9px;}
+  .composer .attach-chip.image{width:86px;height:76px;}
+}
+@container(max-width:360px){
+  .composer .comp-toolbar{flex-wrap:nowrap;padding-left:8px;padding-right:8px;}
+  .composer .comp-toolbar>.comp-control{flex:0 0 auto;}
+  .composer .comp-toolbar>.comp-model{flex:0 1 auto;min-width:44px;margin-left:auto;}
+  .composer .comp-setting{font-size:11px;gap:0;padding-left:6px;padding-right:6px;}
+  .composer .comp-setting>svg{display:none;}
+  .composer .comp-model-name{max-width:42px;}
+  .composer .comp-toolbar:not(:has(.send.stop)) .comp-setting{gap:4px;font-size:12px;}
+  .composer .comp-toolbar:not(:has(.send.stop)) .permission>svg:first-child{display:block;width:14px;height:14px;}
+  .composer .comp-toolbar:not(:has(.send.stop)) .comp-model .comp-setting>svg{display:block;width:12px;height:12px;}
+  .composer .comp-foot{flex-wrap:wrap;gap:6px;}
+  .composer .comp-foot>.send-group{margin-left:auto;}
+}
+@media(pointer:coarse){
+  .composer-popover .composer-option{min-height:52px;}
+  .composer .comp-add,.composer .comp-setting,.composer .send{min-width:44px;min-height:44px;}
+  .composer .attach-chip .attach-x{min-width:32px;min-height:32px;}
+}
+@media(prefers-reduced-motion:reduce){.popover.composer-popover{animation:none;}}
+@media(pointer:coarse){
+  .run-settings .pop-custom-row input{min-height:44px;font-size:16px;}
+  .run-settings-back,.run-models-back,.run-settings .pop-custom-row button,.run-reasoning-option,.run-reasoning-reset{min-height:44px;}
+}
 
 /* ⌘K command palette */
 .palette-scrim{position:fixed;inset:0;background:rgba(0,0,0,.38);backdrop-filter:blur(3px);z-index:240;display:flex;align-items:flex-start;justify-content:center;padding-top:13vh;animation:fadein .12s ease;}
@@ -1453,8 +1553,7 @@ button.pop-item:hover{background:var(--surface-2);}
      the home indicator. The keyboard hints are mouse-era noise on a phone. */
   .app.mobile .composer{padding:10px 12px calc(12px + env(safe-area-inset-bottom));}
   .app.mobile .comp-area textarea{font-size:16px;}
-  .app.mobile .comp-caption>span{display:none;}
-  .app.mobile .send{width:40px;height:40px;}
+  .app.mobile .send{width:44px;height:44px;}
 
   /* Ask card options are tap targets — give them room. */
   .app.mobile .ask-opt{padding:10px 13px;}
@@ -1659,7 +1758,7 @@ button.pop-item:hover{background:var(--surface-2);}
 .bp-handoff{border:1px solid var(--coral);background:var(--coral-soft);border-radius:var(--r-sm);padding:10px 12px;font-size:12.5px;line-height:1.6;color:var(--ink);}
 .bp-handoff-sub{margin-top:4px;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);}
 .bp-viewer{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel);box-shadow:var(--sh-2);position:relative;}
-.bp-tabs{display:flex;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;padding:6px 6px 0;border-bottom:1px solid var(--line);background:var(--surface-2);scrollbar-width:thin;}
+.bp-tabs{display:flex;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;padding:6px 6px 0;border-bottom:1px solid var(--line-2);background:var(--surface-2);scrollbar-width:thin;}
 .bp-tab{display:flex;align-items:center;gap:6px;flex:0 0 auto;min-width:72px;max-width:200px;padding:7px 10px;border-radius:6px 6px 0 0;border-bottom:2px solid transparent;color:var(--ink-3);font-size:12px;text-align:left;}
 .bp-tab > span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
 .bp-tab.active{background:var(--panel);border-bottom-color:var(--accent);color:var(--ink);}
@@ -1724,8 +1823,9 @@ button.pop-item:hover{background:var(--surface-2);}
 .sess-head .sh-tools{gap:8px;flex-wrap:nowrap;flex-shrink:0;}
 .session-more{width:32px;height:32px;}
 .session-viewbar{display:flex;align-items:center;gap:16px;min-height:42px;padding:0 22px;border-bottom:1px solid var(--line-2);}
-.session-agent-label{color:var(--ink-3);font-size:12px;}
-.session-branch{margin-left:auto;min-width:0;display:flex;align-items:center;gap:6px;color:var(--ink-4);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.session-origin{display:flex;align-items:center;gap:6px;}
+.session-origin svg{width:14px;height:14px;flex:none;}
+.session-origin span{min-width:0;overflow-wrap:anywhere;}
 .session-viewbar .viewseg{flex-shrink:0;}
 .compact-session .sh-tools{flex-wrap:nowrap;}
 .composer{padding:16px 24px 12px;}
@@ -1733,9 +1833,16 @@ button.pop-item:hover{background:var(--surface-2);}
 .comp-area{padding:18px 20px 10px;}
 .comp-toolbar{padding:4px 14px 12px;}
 .comp-setting{font-size:13px;}
-.comp-caption{font-size:11px;padding-top:9px;}
-.comp-caption button{font-size:11px;}
-.transcript .tw{max-width:800px;}
+/* Transcript and composer share one column; only a wide, isolated chat is capped. */
+[data-chat-layout]{--cli-chat-gutter:16px;--cli-chat-content-max:100%;container:chat-column / inline-size;}
+[data-chat-layout="centered"]{--cli-chat-content-max:50vw;}
+.body[data-chat-sidebars="open"]>.col-session [data-chat-layout="centered"]{--cli-chat-content-max:100%;}
+[data-chat-layout] .transcript>.tw{width:calc(100% - 2 * var(--cli-chat-gutter));max-width:var(--cli-chat-content-max);margin-inline:auto;padding-inline:0;}
+.session [data-chat-layout]>.composer{padding-inline:var(--cli-chat-gutter);padding-inline-end:calc(var(--cli-chat-gutter) + var(--cli-chat-scrollbar,0px));}
+[data-chat-layout]>.composer>.composer-inner{width:100%;max-width:var(--cli-chat-content-max);margin-inline:auto;}
+[data-chat-layout]>.cli-refs,[data-chat-layout]>.cli-queue{width:calc(100% - 2 * var(--cli-chat-gutter) - var(--cli-chat-scrollbar,0px));max-width:var(--cli-chat-content-max);margin-inline:auto;margin-inline-start:max(var(--cli-chat-gutter),calc((100% - var(--cli-chat-scrollbar,0px) - var(--cli-chat-content-max)) / 2));flex-shrink:0;}
+@container chat-column (max-width:900px){[data-chat-layout]>*{--cli-chat-content-max:100%;}}
+@container chat-column (max-width:640px){[data-chat-layout]>*{--cli-chat-gutter:12px;}}
 .task-origin{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--ink-3);padding-top:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .fork-sources{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px 0;}
 .fork-sources>span{max-width:100%;display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--line);background:var(--surface-2);border-radius:8px;font-size:11px;color:var(--ink-2);overflow-wrap:anywhere;}