/* Menus, toasts, drag ghosts, the files panel and the model picker (loaded after hero-ui.css). */

.hz-clip { position: relative; }
.overlay { position: absolute; inset: 0; pointer-events: none; z-index: 50; }
.overlay > * { pointer-events: auto; }
.hz-app.dragging, .hz-app.dragging * { cursor: grabbing !important; user-select: none; }

/* context menus: popover_card, 13 px rows with 15 px icons (hz_tabs.rs pane / tab menus) */
.pop.ctx, .pop.picker { position: absolute; }
.pop.ctx { display: flex; flex-direction: column; gap: var(--popover-menu-gap); }
.mrow.danger { color: var(--c-danger); }
.mrow.off { opacity: .4; cursor: default; }
.mrow.off:hover { background: transparent; }
.msep { height: 1px; margin: 4px -4px; background: var(--c-border); }
.ic.dang { color: var(--c-danger); }
.ic.turn { transform: rotate(-90deg); }
.sbglyph.sm { width: 15px; height: 15px; flex: none; }
.sbglyph.r .panel { left: auto; right: calc(6.5px * var(--s)); }
.sbglyph.d .panel { left: calc(6.5px * var(--s)); right: calc(6.5px * var(--s)); top: auto; bottom: calc(7.5px * var(--s)); width: auto; height: calc(4.5px * var(--s)); }
.mrow .sbglyph { color: var(--c-text-muted); }

.toast { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; display: flex; gap: 14px; align-items: center; padding: 9px 14px; border-radius: 10px; background: var(--c-fn-glass-overlay); border: 1px solid var(--c-border); box-shadow: 0 10px 15px -3px rgb(0 0 0 / .15); font-size: 12.5px; color: var(--c-text); max-width: 640px; }
.toast[hidden] { display: none; }
.toast b { font-weight: 500; color: var(--c-accent); cursor: pointer; }

.ghost { position: absolute; z-index: 60; pointer-events: none; padding: 4px 10px; border-radius: 6px; background: var(--c-fn-glass-overlay); border: 1px solid var(--c-border-strong); font-size: 12px; color: var(--c-text); box-shadow: 0 6px 12px rgb(0 0 0 / .18); }
.hz-pane.drop { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--c-accent) 14%, transparent); }
.tab.drop, .ws-row.drop { outline: 1.5px solid var(--c-accent); outline-offset: -1px; }
.rename { height: 20px; padding: 0 5px; border-radius: 4px; border: 1px solid var(--c-border-strong); outline: 0; background: var(--c-input-bg); color: inherit; font: inherit; }
.tab .rename { margin: 0 -4px; }
.tab { user-select: none; }
.hz-pane .tag-title { white-space: nowrap; }

/* the files panel (right of the panes, toggled from the title bar) */
.files-panel { position: absolute; right: 0; top: var(--ui-titlebar-height); bottom: 0; width: 290px; border-left: 1px solid rgb(var(--hairline-rgb) / .10); background: var(--c-bg); font-size: 12.5px; overflow: hidden; z-index: 4; }
.files-panel[hidden] { display: none; }
.with-files .area { right: 290px; }
.with-files .tb-right { right: 0; }
.fhead { height: 38px; padding: 0 8px; display: flex; align-items: center; gap: 4px; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.fsearch { flex: 1; height: 24px; padding: 0 8px; border-radius: var(--ui-control-radius); background: rgb(var(--ink-rgb) / .035); display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--c-text-faint); }
.fx { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.froot { padding: 8px 10px 4px; font-size: 11.5px; color: var(--c-text-muted); }
.frow { height: 27px; display: flex; align-items: center; gap: 6px; padding-right: 8px; color: var(--c-text); cursor: pointer; white-space: nowrap; }
.frow:hover { background: rgb(var(--wash-rgb) / .05); }
.frow.sel { background: rgb(var(--wash-rgb) / .09); }
.fchev { width: 12px; display: flex; justify-content: center; flex: none; }
.fi { flex: none; }

/* the model picker, popped over a composer */
.pop.picker { width: 356px; height: 368px; padding: 0; overflow: hidden; z-index: 55; font-size: 13px; display: flex; flex-direction: column; }
.prail { height: 40px; display: flex; align-items: center; gap: 4px; padding: 0 10px; border-bottom: 1px solid var(--c-border); }
.prail span { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--c-text-muted); }
.prail .pbrand { color: var(--c-text); box-shadow: inset 0 -2px 0 var(--c-accent); border-radius: 0; }
.psearch { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 14px; color: var(--c-text-faint); border-bottom: 1px solid var(--c-border); }
.plist { flex: 1 1 0; padding: var(--popover-card-inset); }
.prow { height: 32px; display: flex; align-items: center; gap: 10px; padding: 0 8px; border-radius: var(--popover-menu-item-radius); cursor: pointer; }
.prow:hover, .prow.on { background: rgb(var(--wash-rgb) / .11); }
.pk { font-size: 11px; color: var(--c-text-faint); }
.popt { height: 32px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-size: 12.5px; color: var(--c-text-muted); }
.popt + .popt { margin-bottom: 4px; }
.pv { display: flex; align-items: center; gap: 4px; }
.popt:first-of-type { border-top: 1px solid var(--c-border); }

/* the working agent's live step */
.grp.live .grp-h span::after { content: ""; }
.md.reply.live { margin-top: 12px; }

/* ---- the page's figures: a live crop in place of a picture ---- */
[data-fig] { position: relative; display: block !important; overflow: hidden; }
[data-fig] > div { width: 100%; }
[data-fig].on > img { display: none; }
[data-fig] .tui-clip { overflow: hidden; background: var(--c-terminal-background); }
[data-fig] .tui-stage { transform-origin: 0 0; overflow: hidden; }
[data-fig] .tui-host .xterm { padding: 0; }
[data-fig]:not(.on) .tui-clip { position: absolute; visibility: hidden; height: 0; }
.toggle-fig { display: flex !important; gap: 14px; background: var(--card); }
.toggle-fig > div { flex: 1 1 0; min-width: 0; }
.toggle-fig .tf-r { background: var(--c-terminal-background); }

/* the blocked agent's conversation above its card (a command block, the question row) */
.transcript.center { overflow: hidden; }
.transcript.center .tr-col.above { padding-bottom: 0; }
.transcript.center .tr-col.above > * + * { margin-top: 24px; }
.hz-pane .transcript.center .wait { margin: 24px 16px 17px; }
.hz-pane.wide .transcript.center .wait { width: 736px; margin: 24px auto 17px; }
.cmdblock { border: 1px solid var(--c-border); border-radius: 8px; background: rgb(var(--wash-rgb) / .04); }
.cb-h { height: 28px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 10px; border-bottom: 1px solid var(--c-border); }
.cb-b { padding: 11px 12px; font: 400 12.5px/18px "Geist Mono", monospace; color: var(--c-text); }
.qrow { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--c-border); border-radius: 8px; background: rgb(var(--wash-rgb) / .04); font-size: 12px; }
.qi { width: 18px; height: 18px; border-radius: 5px; background: rgb(var(--wash-rgb) / .08); display: flex; align-items: center; justify-content: center; }
.qk { color: var(--c-text); }
.qv { color: var(--c-text-muted); }

/* a narrow pane: the composer takes two rows (text above, the controls below) as the app's does */
.hz-pane.narrow .pill-in { position: relative; display: block; height: 102px; padding: 0; }
.hz-pane.narrow .ph-in { position: absolute; left: 8px; right: 8px; top: 12px; width: auto; }
.hz-pane.narrow .clip { position: absolute; left: 10px; bottom: 11px; }
.hz-pane.narrow .send { position: absolute; right: 8px; bottom: 11px; margin: 0; }
.hz-pane.narrow .model { position: absolute; right: 46px; bottom: 11px; height: 28px; }
.hz-pane.narrow .model em { display: none; }
.hz-pane.narrow .composer { padding-bottom: 40px; }
.hz-pane.wide .transcript.center { padding-bottom: 0; }

/* a file or pane chip in a composer (a dropped file, an "@" mention) */
.pill-in .cchip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; margin-right: 6px; border-radius: 6px; flex: none; background: rgb(var(--wash-rgb) / .09); font-size: 12px; color: var(--c-text); white-space: nowrap; }
.pill-in.drop { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-accent) 45%, transparent); }
.mention .mrow.on { background: rgb(var(--wash-rgb) / .11); }
.mention .pk { margin-left: auto; font-size: 11px; color: var(--c-text-faint); }
.prail .pb { box-shadow: none; }

/* one size for every figure: 16:9 */
[data-fig] { aspect-ratio: 16 / 9; }
.toggle-fig { aspect-ratio: auto !important; }
.transcript.center { padding-top: 34px; }

/* a card taller than a small pane: it is tightened (not cut), and whatever still rises under the tag fades out */
.hz-pane:not(.wide) .wait { padding: 12px 14px 12px; }
.hz-pane:not(.wide) .wait-p { font-size: 13.5px; line-height: 17px; margin-top: 4px; }
.hz-pane:not(.wide) .wait-q { margin-top: 10px; font-size: 14px; }
.hz-pane:not(.wide) .wait-rule { margin-top: 11px; }
.hz-pane:not(.wide) .wait-in { height: 34px; padding-top: 8px; padding-bottom: 4px; }
.transcript.center { padding-top: 30px; -webkit-mask-image: linear-gradient(to bottom, transparent 24px, #000 40px); mask-image: linear-gradient(to bottom, transparent 24px, #000 40px); }