/* Builder assistant (plan review, AI edit proposals), top-bar extras, tree caps, mode smoke — BLD2 */

/* top bar: menus hide ≤1100 px (the "Menu" button takes over), undo/redo + AR label ≤1360 px */
@media (max-width: 1360px) { .tb-xl { display: none !important; } }
@media (max-width: 1100px) { #menubar .tb-lg { display: none !important; } #menubar .show-lg { display: inline-flex !important; } }
.rd-project-line { display: inline-flex; align-items: center; gap: 8px; justify-content: center; min-width: 0; max-width: 100%; }
.rd-project-line .rd-project-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sample-chip { height: 20px; min-height: 20px; padding: 0 8px; font-size: 11px; flex: none; }
.tb-ship { display: inline-flex; gap: 6px; align-items: center; }
#btn-undo[aria-disabled="true"], #btn-redo[aria-disabled="true"] { opacity: .45; }

/* site tree: "+ n more racks" / "+ n more devices · open elevation" */
.rd-tree-row.tree-more { color: var(--text-secondary); }

/* Blueprint ↔ Realistic smoke */
#smoke-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; z-index: 1; }

/* chat: empty state + suggestion buttons */
.chat-empty { display: grid; gap: 10px; padding: 8px 0; }
.chat-empty strong { font: 600 15px/22px var(--font-ui); }
.chat-empty span { color: var(--text-secondary); font: 400 13px/19px var(--font-ui); }
.chat-empty .rd-btn, .chat-examples .rd-btn { justify-content: flex-start; height: auto; min-height: 44px; padding: 8px 12px; text-align: left; white-space: normal; }
.chat-examples { display: grid; gap: 8px; }

/* reading the BOQ */
.read-k { color: var(--text-secondary); }
.read-track { height: 6px; border-radius: 6px; background: var(--border); overflow: hidden; }
.read-track i { display: block; width: 0; height: 100%; background: #ff8a64; border-radius: 6px; transition: width .4s; }
.read-track.is-indeterminate i { width: 30%; animation: read-slide 1.4s ease-in-out infinite; }
@keyframes read-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .read-track i { transition: none; } .read-track.is-indeterminate i { animation: none; width: 100%; opacity: .5; } }
.read-sub { font: 500 12px/18px var(--font-ui); color: var(--text-secondary); }

/* plan */
.callout-success { background: var(--success-subtle); color: var(--success); }
.callout { font-size: 13px; line-height: 19px; }
.callout-body { display: grid; gap: 4px; }
.callout-link { color: inherit; font-weight: 650; text-decoration: underline; justify-self: start; padding: 6px 0; }
.plan-step .rd-check { margin: 2px 0 0 1px; }
.plan-step.is-off > span:nth-child(2) { text-decoration: line-through; color: var(--text-secondary); }
.plan-step-note { color: var(--text-secondary); }
.plan-card > .plan-note { display: block; padding: 2px 0 6px; }
.msg-ok { display: flex; gap: 8px; align-items: center; color: var(--success); font-weight: 600; }
.msg-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* pinned plan actions above the composer */
.plan-bar { padding: 10px 12px; border-top: 1px solid var(--glass-border); display: grid; gap: 8px; background: rgba(255,90,43,.06); flex: none; }
.plan-bar-row { display: flex; align-items: center; gap: 8px; }
.plan-bar-row .rd-btn { flex: 1; justify-content: center; }
.plan-bar-row .plan-apply { flex: 2; }
.plan-bar-row [data-bar="discard"] { flex: none; padding: 0 10px; }
.plan-issues { font: 500 12px/16px var(--font-ui); color: var(--warning); }
.plan-confirm { display: grid; gap: 8px; }
.plan-confirm > span { font: 600 13px/18px var(--font-ui); }
.rd-btn.is-danger-text { color: var(--danger); }

/* AI edit proposal */
.prop-card { background: var(--surface); border: 1px solid rgba(255,90,43,.45); border-radius: var(--radius-control); padding: 14px; display: grid; gap: 10px; }
.prop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prop-head strong { font: 600 14px/20px var(--font-ui); }
.prop-lines { display: grid; gap: 6px; }
.prop-line { display: grid; grid-template-columns: 18px 1fr; gap: 6px; font: 400 13px/19px var(--font-ui); }
.prop-line b { font: 700 13px/19px var(--font-code); }
.prop-line b.is-add { color: var(--success); }
.prop-line b.is-mod { color: #46d4ff; }
:root[data-theme="light"] .prop-line b.is-mod { color: #0a6f94; }
.prop-actions { display: flex; gap: 8px; }
.prop-actions .rd-btn-primary { flex: 2; justify-content: center; }
.prop-actions .rd-btn-tertiary { flex: 1; justify-content: center; }

/* preview banner (bottom centre, above the toolbar) */
#preview-banner.status-banner { background: rgba(9,14,24,.92); color: #e8edf3; max-width: min(640px, calc(100vw - 32px)); text-align: center; }
:root[data-theme="light"] #preview-banner.status-banner { background: rgba(255,255,255,.95); color: var(--text); }
#preview-banner .rd-btn { height: 30px; min-height: 30px; padding: 0 10px; font-size: 13px; }

/* "Plan applied" toast (top centre) */
.plan-toast { position: fixed; top: 84px; left: 50%; transform: translateX(-50%); z-index: 44; display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 24px); padding: 8px 8px 8px 14px; border-radius: var(--radius-pill); font: 500 13px/18px var(--font-ui); color: var(--text); pointer-events: auto; }
.plan-toast[hidden] { display: none; }
.plan-toast-ok { display: inline-flex; color: var(--success); }
@media (max-width: 640px) { .plan-toast { top: 76px; flex-wrap: wrap; border-radius: var(--radius-panel); } }

/* agent mode: the toggle in the chat header and the step log in a reply */
.agent-toggle { display:inline-flex; align-items:center; gap:6px; margin-left:auto; font:500 12px/16px var(--font-ui); color:var(--text-secondary); cursor:pointer; user-select:none; }
.agent-toggle input { width:16px; height:16px; margin:0; accent-color:var(--action); cursor:pointer; }
.agent-toggle:has(input:checked) { color:var(--text); }
.agent-steps { list-style:none; margin:6px 0 4px; padding:0; display:grid; gap:6px; }
.agent-steps li { display:grid; grid-template-columns:16px 1fr; gap:8px; align-items:start; font:400 13px/18px var(--font-ui); color:var(--text); }
.agent-steps li svg { margin-top:1px; }
.agent-steps li.ok svg { color:var(--success); }
.agent-steps li.warn svg { color:var(--warning); }