/* Conversation hierarchy: compact context, one transcript, one composer. */
.real-conversation{background:#edf2f7!important;border-left:1px solid #cbd6e1!important;color:#273b4c}
.real-conversation #iv{background:transparent!important}
/* The card's own top row carries the scope, the tabs and the controls now. What is left of this band
   is scope and intention, each hidden most of the time -- so it reserves no height of its own. */
.real-conversation #focused-interview-header{padding:0!important;min-height:0!important;background:transparent!important;border-bottom:0}
.real-conversation #focused-interview-header>*:not([hidden]):not(:empty){display:block;padding:8px 12px;background:#e4ebf2;border-bottom:1px solid #cbd6e1}
.real-conversation .conversation-heading{height:42px;display:flex;gap:10px;align-items:center;margin:0!important}
.real-conversation .conversation-heading>strong{font-size:14px!important;letter-spacing:-.02em}
.real-conversation #conversation-scope{flex:1;min-width:0;font-size:11px;border-left:1px solid #bdcbd9;padding-left:10px;gap:5px}
.real-conversation #conversation-scope>.bt{font-size:0;padding:4px;min-width:24px;width:24px;height:24px}
.real-conversation #conversation-scope>.bt .ic{width:14px;height:14px}
.real-conversation .interview-header-actions{gap:3px;flex:none}
.real-conversation .interview-header-actions button{height:26px;min-height:0;padding:4px;font-size:11px}
.real-conversation #iv>.bar,.real-conversation #conversation-intention,.real-conversation #conversation-orientation,.real-conversation #iv-progress,.real-conversation #iv-implementation-requests,.real-conversation #chat-controls{display:none!important}
.real-conversation #ivscroll{padding:0!important;min-height:0;overflow:auto!important;background:transparent!important}
.real-conversation #iv .tx{padding:14px!important;background:transparent!important}
.real-conversation #iv .tx>h4,.real-conversation #iv .tx>h4+div:not(#ivlines){display:none}
.real-conversation #ivlines .line{display:block!important;margin:0 0 20px!important;padding:0!important;border:0!important;background:none!important;font-size:12px!important;line-height:1.65!important}
.real-conversation #ivlines .line .who{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.real-conversation #ivlines .line .say{font-size:calc(12px * var(--staves-chat-scale,1))!important;line-height:1.65!important;display:block;max-width:100%;white-space:pre-wrap}
.real-conversation #ivlines .line:not(.q){margin-left:24px!important;padding:10px 12px!important;background:#dfe8f1!important;border-radius:12px 12px 3px 12px}
.real-conversation #iv>.ask{position:relative;padding:10px 12px!important;border-top:1px solid #cbd6e1!important;background:#e4ebf2!important;flex:none}
.real-conversation #iv>.ask>.box{display:grid!important;grid-template-columns:28px 28px 1fr 28px;gap:5px!important;align-items:center;border:1px solid #bacbdb!important;border-radius:13px!important;padding:9px!important;background:white!important;box-shadow:0 3px 10px #203a5010}
.real-conversation #ivin{grid-column:1/-1;grid-row:1;box-sizing:border-box;width:100%!important;min-height:24px!important;max-height:160px;font-family:inherit!important;font-size:12px!important;line-height:1.6!important;border:0!important;box-shadow:none!important;outline:0!important;resize:none!important;padding:2px 3px!important;margin:0!important;background:transparent!important}
.real-conversation #ivsend{grid-column:4;grid-row:2;border-radius:50%!important;width:28px!important;height:28px!important;min-height:0!important;padding:6px!important;background:#3157d5!important;color:white!important;border:0!important}
.real-conversation #ivmic{grid-column:2;grid-row:2;width:28px!important;height:28px!important;padding:5px!important;margin:0!important}
.real-conversation #ivsend .ic,.real-conversation #ivmic .ic{width:16px;height:16px}
.real-conversation #iv-latest{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:10px}
#staves-compose-menu{grid-column:1;grid-row:2;position:relative}
#staves-compose-menu>summary{list-style:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#eaf0f5;color:#3c5870;cursor:pointer}
#staves-compose-menu>summary::-webkit-details-marker{display:none}
#staves-compose-menu>summary .ic{width:17px;height:17px}
#staves-compose-menu[open]>summary{background:#d7e3ef}
.staves-compose-actions{position:absolute;bottom:38px;left:-4px;width:min(300px,calc(100vw - 52px));max-height:min(460px,60vh);overflow:auto;z-index:100;background:#fff;border:1px solid #c3cfdb;border-radius:12px;padding:6px;box-shadow:0 12px 35px #21374d25}
.staves-compose-actions section+section{border-top:1px solid #e1e7ee;margin-top:4px;padding-top:4px}
.staves-compose-actions section>small{display:block;font-size:10px;line-height:1.4;color:#66798c;padding:6px 8px}
.staves-compose-actions .editor-button{width:100%;min-height:30px;height:auto!important;display:flex!important;justify-content:flex-start!important;gap:8px;border:0!important;background:transparent!important;padding:7px 8px!important;border-radius:6px;font-size:11px!important;text-align:left}
.staves-compose-actions .editor-button:hover{background:#edf3f8!important}
.staves-compose-actions .ic{width:15px;height:15px;flex:none}
#staves-compose-footer{display:flex;align-items:center;gap:9px;margin-top:7px;font-size:10px;color:#536d83;min-height:19px}
#staves-compose-footer label{display:flex;align-items:center;gap:4px;cursor:pointer}
#staves-compose-footer input{width:12px;height:12px;accent-color:#3157d5;margin:0}
#staves-compose-footer button{font:inherit;background:none;border:0;color:inherit;padding:2px;cursor:pointer}
#staves-model{margin-left:auto!important;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.real-conversation #ivstate{font-size:10px!important;line-height:1.5;margin:6px 3px 0!important}
.real-conversation #conversation-model-gate{margin:0 0 8px!important;font-size:11px!important;line-height:1.45}
.real-conversation #interview-build-receipt{padding:6px 12px!important;font-size:10px!important;background:#e5eee9}
.real-conversation .form.conversation-inspecting{display:block!important;padding:12px!important;background:#f7f9fb!important;border-top:1px solid #cbd6e1}
.staves-question-list{display:grid;gap:5px}
.staves-question-list button{display:flex;flex-wrap:wrap;height:auto;text-align:left;justify-content:flex-start;padding:10px;font-size:12px}
.staves-question-list button small{width:100%;font-size:10px;color:var(--t2);padding-left:24px}
.real-conversation button:focus-visible,.real-conversation summary:focus-visible{outline:2px solid #3157d5;outline-offset:2px}
.real-conversation #iv>.ask>.box:focus-within{border-color:#6f8bc6!important;box-shadow:0 0 0 2px #3157d512}

.real-conversation #iv .form[hidden]{display:none!important}

/* One shared desktop width and origin for the canvas, panel and resize handle. */
@media(min-width:751px){
  /* The card hovers over the canvas, so the canvas keeps its full width. Reserving a grid column the
     width of the card meant every drag of the resize handle reflowed the whole board underneath it. */
  body.interview-focus:has(#conversation-panel.open #iv) #ws:not(.full),
  body.work-focus.work-chat.interview-focus:has(#conversation-panel.open #iv) #ws:not(.full){grid-template-columns:minmax(0,1fr)!important}
  /* The card floats clear of the app bar and the status bar; --staves-panel-gap is the one number,
     shared with the header column and the resize handle so they cannot drift apart. */
  body #conversation-panel.open.real-conversation{top:calc(42px + var(--staves-panel-gap,12px))!important;bottom:calc(29px + var(--staves-panel-gap,12px))!important;padding:0!important}
}
.real-conversation #ivsend svg.send-arrow{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* What is settled, in one row. A tick Staves gave is drawn differently from one the person gave. */
/* Status, not a toolbar: small enough to ignore until you look for it. No rule, no reserved line — the
   detail appears under the strip only while you are on a chip. The 24px target minimum is for controls
   you must hit; these report state and the click is a convenience, so they stay compact. */
#focused-interview-header>#settled-row{position:relative;display:flex;flex-wrap:nowrap;align-items:center;gap:3px;width:100%;order:3;padding-top:5px;margin:0;overflow:visible}
.settled-item{display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:9.5px;letter-spacing:.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1;padding:1px 6px;min-height:16px;flex:0 1 auto;min-width:0;border:1px solid var(--line);border-radius:20px;background:#fff;color:var(--t2)}
.settled-item[disabled]{opacity:.65}
.settled-item:not([disabled]){cursor:pointer}
.settled-item:not([disabled]):hover{border-color:var(--line2);color:var(--t1)}
.settled-item.closed{border-color:#aec4b7;background:#f5f8f6;color:#2f5d43}
.settled-item.closed.by-staves{border-color:#c3cbd6;background:#f4f6fa;color:#40506b}
.settled-item span{font-size:10px;opacity:.9}
/* One line under the strip, for the chip you are on. Hover reaches it, and so does a keyboard. */
/* Floats over the conversation on hover or focus. Absolutely positioned, so nothing below it moves. */
#settled-tip{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:6;display:none;
 padding:6px 9px;border-radius:7px;background:#252a34;color:#f2f5f9;
 font-family:Manrope,Archivo,sans-serif;font-size:10.5px;line-height:1.4;box-shadow:0 6px 18px #16202c33;pointer-events:none}
#settled-tip[data-show]{display:block}

/* The composer's own controls clear the 24px minimum too: the checkbox drew at 12px and the model
   button at 19px, both below anything you can reliably hit. */
/* Two id rules already claim this box — #iv .ask input sets min-width:80px and #staves-compose-footer
   input sets 12px — so the checkbox needs to out-specify both to be a checkbox. */
#staves-compose-footer #staves-auto-update{flex:none;width:16px;height:16px;min-width:16px;margin:4px}
#staves-model{min-height:24px;padding:0 8px}

/* The class this exchange is about is ringed; the rest of the strip stays quiet. */
.settled-item[data-live="true"]{border-color:var(--acc);color:var(--t1);box-shadow:0 0 0 2px #edf1ff}
/* What an exchange fed, under it, in the smallest type that is still readable. */
/* What a turn was about, as pills rather than a sentence — #conversation-panel p sets 12px on anything
   that looks like prose here, which is how this ended up reading as something Staves said. */
#conversation-panel .line-topics{display:flex;flex-wrap:wrap;gap:3px;grid-column:2;margin:4px 0 0;font-size:0}
#conversation-panel .line-tag{font-family:Manrope,Archivo,sans-serif;font-size:9px;font-weight:600;letter-spacing:.06em;
 text-transform:uppercase;line-height:14px;padding:0 6px;border-radius:9px;color:var(--t3);background:#e6eaf1}
#conversation-panel .line-tag.settled{color:#2f5d43;background:#e8f1eb}