7c38fd8102
A steer or follow-up accepted while a turn is closing is now claimed by a fresh turn at the driver's clean exit instead of stranding in the inbox; cancellation and pre-step rejection still park accepted work. Continuable subagent follow-ups accept image parts: the wire is upload-shaped, the Host admits and persists each batch before inbox acceptance, and delivery is refused when the child model declines image input. The queue dock renders durable image thumbnails instead of an [image] text marker. Fixes #3186
204 lines
4.1 KiB
CSS
204 lines
4.1 KiB
CSS
/* Figma .FileContainerText 1:791: the wrapper uses the shared dock inset
|
|
inside the composer card around the inset panel. */
|
|
|
|
.dock {
|
|
box-sizing: border-box;
|
|
flex: none;
|
|
width: calc(
|
|
100% -
|
|
var(--dsh-composer-side-clearance) -
|
|
var(--dsh-composer-side-clearance) -
|
|
var(--dsh-composer-dock-inset) -
|
|
var(--dsh-composer-dock-inset)
|
|
);
|
|
max-width: calc(
|
|
var(--dsh-composer-card-max-width) -
|
|
var(--dsh-composer-dock-inset) -
|
|
var(--dsh-composer-dock-inset)
|
|
);
|
|
/* Cancel the stack gap after this item and tuck 3px under the input card
|
|
(square bottom), reading as one attached surface. */
|
|
margin: 0 auto calc(0px - var(--dsh-composer-stack-gap) - 3px);
|
|
/* Horizontal padding completes the shared dock inset (this wrapper only
|
|
subtracts two insets from its width); no vertical padding, so the visual
|
|
gap above the panel stays the uniform stack gap. */
|
|
padding: 0 var(--dsh-composer-dock-inset);
|
|
}
|
|
|
|
.panel {
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
padding: 2px 0;
|
|
border-radius: 12px 12px 0 0;
|
|
background: var(--dsw-specific-tip);
|
|
--dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
|
|
--dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
|
|
}
|
|
|
|
.panel::after {
|
|
position: absolute;
|
|
inset: 0;
|
|
border: 1px solid var(--dsw-alias-border-l1);
|
|
/* The input card's own top border closes the shape below. */
|
|
border-bottom: none;
|
|
border-radius: inherit;
|
|
content: '';
|
|
pointer-events: none;
|
|
}
|
|
|
|
.header {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
width: 100%;
|
|
height: 36px;
|
|
/* Right inset 12px puts the chevron on the same vertical line as the Todo
|
|
header's chevron (12px body padding there). */
|
|
padding: 4px 12px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
color: var(--dsw-alias-label-primary);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.header:focus-visible {
|
|
outline: 2px solid var(--dsw-alias-label-tertiary);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.header:disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
.lead {
|
|
display: grid;
|
|
flex: none;
|
|
place-items: center;
|
|
color: var(--dsw-alias-label-tertiary);
|
|
}
|
|
|
|
.count {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
font-family: Inter, var(--dsw-font-family);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.chevron {
|
|
display: grid;
|
|
flex: none;
|
|
place-items: center;
|
|
width: 14px;
|
|
height: 14px;
|
|
color: var(--dsw-alias-label-tertiary);
|
|
}
|
|
|
|
.list {
|
|
max-height: 180px;
|
|
overflow-y: auto;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.row {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
width: 100%;
|
|
height: 36px;
|
|
padding: 4px 5px 4px 12px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.row + .row {
|
|
box-shadow: inset 0 1px 0 var(--dsw-alias-border-l1);
|
|
}
|
|
|
|
.thumbs {
|
|
display: flex;
|
|
flex: none;
|
|
gap: 4px;
|
|
}
|
|
|
|
.thumb {
|
|
width: 24px;
|
|
height: 24px;
|
|
border: 1px solid var(--dsw-alias-border-l1);
|
|
border-radius: 4px;
|
|
background: var(--dsw-alias-bg-base);
|
|
object-fit: cover;
|
|
}
|
|
|
|
.preview,
|
|
.editor {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
font: var(--dsw-font-xs-13);
|
|
font-family: Inter, var(--dsw-font-family);
|
|
}
|
|
|
|
.preview {
|
|
overflow: hidden;
|
|
color: var(--dsw-alias-label-primary-dimmed);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.editor {
|
|
box-sizing: border-box;
|
|
height: 28px;
|
|
padding: 0 8px;
|
|
border: 1px solid var(--dsw-alias-border-l2);
|
|
border-radius: 6px;
|
|
outline: none;
|
|
background: var(--dsw-alias-bg-base);
|
|
color: var(--dsw-alias-label-primary);
|
|
}
|
|
|
|
.editor:focus {
|
|
border-color: var(--dsw-alias-state-business-primary);
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
flex: none;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.action {
|
|
display: grid;
|
|
flex: none;
|
|
place-items: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
color: var(--dsw-alias-label-tertiary);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.action:hover:not(:disabled) {
|
|
background: var(--dsw-alias-interactive-bg-hover);
|
|
}
|
|
|
|
.action:focus-visible {
|
|
outline: 2px solid var(--dsw-alias-label-tertiary);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.action:disabled {
|
|
cursor: default;
|
|
opacity: 0.45;
|
|
}
|