@spzxg/cli-ui 0.6.6 → 0.6.7

package/src/operator.css

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