/* Bloqode block editor styles. Blocks are 32 tall, width fits text, snap vertically. */

#bqEditor {
    position: relative;
    flex: 1 1 auto;
    min-height: 320px;
    overflow: auto;
    background: #e9edf1;
    background-image: radial-gradient(#cfd6de 1px, transparent 1px);
    background-size: 16px 16px;
    border-radius: 0;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

.bq-block {
    position: absolute;
    width: 128px;
    height: 32px;
    border-radius: 8px;
    color: #fff;
    font: 600 11px/32px "Segoe UI", system-ui, sans-serif;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: grab;
    touch-action: none;
    box-sizing: border-box;
    padding: 0 4px 0 10px;
    transition: transform .05s ease-in-out, width .12s ease-in-out, height .12s ease-in-out;
}

.bq-block:active { cursor: grabbing; }

.bq-block.bq-start { background: #22a06b; }
.bq-block.bq-action { background: #2f7de1; }
.bq-container {
    height: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    line-height: normal;
}

.bq-head {
    width: 100%;
    height: 32px;
    border-radius: 8px 8px 8px 0;
    background: #e08a2f;
    font: 600 11px/32px "Segoe UI", system-ui, sans-serif;
    transition: height .12s ease-in-out;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 4px 0 10px;
    box-sizing: border-box;
}

/* C-shape body: transparent cavity, 12px left rail (same thickness as the
   12px footer bar). Rail is a separate pill so its inner and outer corners
   stay curved and inner-block offsets stay a clean left-pad. */
.bq-body {
    position: relative;
    width: 100%;
    background: transparent;
    box-sizing: border-box;
    min-height: 0;
    transition: margin-bottom .12s ease-in-out;
}

/* Preview gap shifts ease open/closed; the dragged spine never carries this
   (it tracks the pointer with JS-eased transforms instead). */
.bq-shift {
    transition: transform .12s ease-in-out;
}

.bq-rail {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 12px;
    background: #e08a2f;
    border-radius: 0;
    pointer-events: none;
    transition: bottom .12s ease-in-out;
}

/* Concave corner fillets: 8px orange squares tucked into the inside corners
   where the rail meets the header/footer. A transparent quarter-disc is
   carved out (radial-gradient hard stop), leaving only the small coving tip
   at the vertex — the remaining arc is tangent to both the rail edge and the
   header/footer edge. z-index lifts them above nested blocks (blocks tuck
   behind the curve, Scratch-style); dragged blocks float above while moving. */
.bq-fillet-top, .bq-fillet-bot {
    position: absolute;
    left: 12px;
    width: 8px;
    height: 8px;
    pointer-events: none;
    z-index: 5;
    transition: bottom .12s ease-in-out;
}

.bq-fillet-top {
    top: 0;
    background: radial-gradient(circle 8px at 100% 100%, transparent 7px, #e08a2f 8px);
}

.bq-fillet-bot {
    bottom: 0;
    background: radial-gradient(circle 8px at 100% 0, transparent 7px, #e08a2f 8px);
}

/* Drop-target hover never retints the rail or fillets: they stay
   container-orange like the head/foot rects. */

.bq-foot {
    width: 100%;
    height: 32px;
    background: #e08a2f;
    border-radius: 0 8px 8px 8px;
    font: 600 11px/32px "Segoe UI", system-ui, sans-serif;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 4px 0 10px;
    box-sizing: border-box;
}

.bq-ghost {
    position: absolute;
    pointer-events: none;
    opacity: .45;
    filter: saturate(.6);
    z-index: 0;
    display: none;
    transition: opacity .12s ease-in-out;
    /* Round the silhouette itself (pre-place only): the wrapper is sized to
       the ghost content, so this clips the outer corners rounder than any
       single part without touching live-block chrome. */
    border-radius: 12px;
    overflow: hidden;
}

/* ---------- operator toolbox ---------- */
#bqToolbox {
    flex: 0 0 196px;
    min-height: 0;
    overflow-y: auto;
    background: #ffffff;
    border-right: 1px solid #dee2e6;
    padding: 8px;
    user-select: none;
    -webkit-user-select: none;
}

.bq-tb-head {
    font: 700 10px/1.2 "Segoe UI", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8a93a0;
    margin: 8px 2px 4px;
}

.bq-pal {
    margin: 0 0 6px;
    padding: 0 10px;
    width: fit-content;
    max-width: 100%;
    min-height: 32px;
    font: 600 11px/32px "Segoe UI", system-ui, sans-serif;
    color: #fff;
    background: #45a565;
    cursor: grab;
    white-space: nowrap;
    overflow: hidden;
    touch-action: none;
}

.bq-pal .bq-hole { cursor: default; }

/* Bare literal reporters (true/false): floored width so they read as
   constants, with symmetric side air so the caption sits dead-centre
   (plain rows use the asymmetric 10/4 rhythm). Must match LITERAL_MIN_W
   and LITERAL_PAD_X in JS, which size live shells. */
.bq-block.bq-literal, .bq-pal.bq-literal {
    min-width: 64px;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
}
.bq-block.bq-literal { padding-left: 10px; padding-right: 10px; }

/* Docked literals keep full shell width inside the hole (border-box, so 64
   matches the floating shell exactly) instead of shrinking to text size. */
.bq-rep-full.bq-literal {
    min-width: 64px;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    justify-content: center;
}

/* ---------- row centring: font-proof ----------
   Rows with holes lay children out with flex, not baselines: every caption
   span and hole chip centres on the row's true middle no matter how the
   browser resolves fonts, so argblocks/argspaces can't sink with depth or
   differ per browser. Children keep their measured sizes (shells clip, never
   squish). Rows without holes (.bq-start, .bq-foot) keep line-height. */
.bq-block.bq-action, .bq-block.bq-rep, .bq-block.bq-start, .bq-head, .bq-pal {
    display: flex;
    align-items: center;
}
.bq-block.bq-action > *, .bq-block.bq-rep > *, .bq-block.bq-start > *, .bq-head > *, .bq-pal > * {
    flex: none;
}

/* ---------- reporters: rounded values, pointed booleans ---------- */
.bq-rep {
    color: #fff;
    background: #45a565;
    text-align: center;
    cursor: grab;
}

/* Pill ends at any height: radius caps at half the box, so left and right
   faces stay completely round as rows grow. Pointed bool shapes untouched. */
.bq-value-shape { border-radius: 999px; }
.bq-bool-shape {
    border-radius: 0;
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
}

/* ---------- holes: white slots inside labels ---------- */
/* inline-flex (not inline-block): children centre on the chip's true middle
   instead of the font baseline, so nesting levels can't accumulate the
   baseline-vs-centre discrepancy and sink deeper content. Outer alignment
   against the host row stays vertical-align: middle. */
.bq-hole {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    box-sizing: content-box;
    background: #fff;
    color: #333;
    min-height: 20px;
    line-height: 20px;
    /* Base rhythm, slightly right-hugging (HOLE_MARGIN_X in JS). Holes
       inside occupants get the stronger asymmetric variant below. */
    margin: 0 2px 0 4px;
    cursor: text;
    white-space: nowrap;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
    /* NO transition on min-width/min-height/line-height: the engine opens
       holes to exact model widths and hit-tests the live rect in the same
       frame. An ease would leave stale geometry under the pointer (every
       drag rebuilds chips, restarting the transition, so the preview could
       never arrive and slot snaps were lost). Open/close is instant; the
       ghost silhouette and chain shifts still ease. */
}

.bq-hole.bq-value { border-radius: 999px; padding: 0 6px; }
.bq-hole.bq-bool {
    padding: 0 12px;
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
}

.bq-hole.bq-empty.bq-value { min-width: 18px; }
.bq-hole.bq-empty.bq-bool { min-width: 10px; }
.bq-hole.hot { outline: 2px solid #4ade80; }
.bq-hole.bad { outline: 2px solid #e33; }

/* Occupied holes vanish: transparent flush wrap, so nested green merges
   with no white between. Empty holes keep the white pill look. Margins stay
   at the full hole rhythm so docked argblocks breathe like empty holes. */
.bq-hole.bq-filled {
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0 2px 0 4px;
    clip-path: none;
}

/* Holes inside occupants hug right: roomy lead-in, tight trail
   (OCC_HOLE_MARGIN_X in JS). Top-level holes stay symmetric. */
.bq-rep-full .bq-hole {
    margin: 0 2px 0 8px;
}

/* Inline reps pad filled holes the same way, giving a uniform green rim. */
.bq-rep-full:has(> .bq-hole.bq-filled) {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Docked occupant: full live-reporter size (32px), nested holes natural.
   Roomy lead-in, tight trail (OCC_PAD_L/R in JS — keep in sync): the hole
   sits right of the caption with minimal green after it. Longhands only:
   the :has() rule owns top/bottom. */
.bq-rep-full {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    box-sizing: content-box;
    background: #45a565;
    color: #fff;
    min-height: 32px;
    line-height: 32px;
    padding-left: 6px;
    padding-right: 0;
    white-space: nowrap;
    cursor: grab;
}

/* Flex children keep their measured size: shells clip overflow instead of
   squishing captions or nested chips. */
.bq-hole > *, .bq-rep-full > * {
    flex: none;
}

/* Nested occupants (argblock inside argblock) indent one step so the inner
   green doesn't jam against the outer caption. NEST_PAD_X in JS must match;
   each nesting level adds its own step via the width model. */
.bq-rep-full .bq-rep-full {
    margin-left: 6px;
}

/* ---------- panel splitters (drag to resize side panels) ---------- */
.bq-split {
    flex: none;
    width: 7px;
    cursor: col-resize;
    background: transparent;
    position: relative;
    touch-action: none;
}

.bq-split:hover::after, .bq-split.drag::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2px;
    right: 2px;
    background: #adb5bd;
    border-radius: 2px;
}

/* ---------- left-panel tabs (Scenes | Toolbox) ---------- */
.bq-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 8px 0;
    background: #ffffff;
    flex: none;
}

.bq-tab {
    flex: 1;
    height: 30px;
    border: 1px solid #dee2e6;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: #f1f3f5;
    color: #495057;
    font: 600 12px/28px "Segoe UI", system-ui, sans-serif;
    cursor: pointer;
    padding: 0;
}

.bq-tab.active {
    background: #ffffff;
    color: #212529;
}

/* The toolbox docks inside its tab pane instead of beside the editor. */
#toolboxHost #bqToolbox {
    border-right: none;
    border-top: 1px solid #dee2e6;
    min-height: 100%;
    box-sizing: border-box;
}

/* ---------- sprite roster + scene sprite list ---------- */
.spr-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid #eef0f2;
    cursor: pointer;
}

.spr-row.sel {
    background: #e7f1ff;
}

.spr-thumb {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: #dee2e6;
    object-fit: contain;
    flex: none;
}

.spr-thumb-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 16px/1 "Segoe UI", system-ui, sans-serif;
    color: #6c757d;
}

.spr-name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spr-meta {
    font-size: 11px;
    opacity: .6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spr-del {
    margin-left: auto;
    flex: none;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #868e96;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.spr-del:hover {
    background: #f1d3d3;
    color: #a32121;
}

/* ---------- modal dialogs ---------- */
.bq-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(33, 37, 41, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.bq-modal {
    background: #ffffff;
    border-radius: 10px;
    padding: 14px 16px;
    width: 320px;
    max-width: calc(100vw - 32px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    font-size: 13px;
}

.bq-modal label {
    display: block;
    opacity: .6;
    font-size: 11px;
    margin: 8px 0 2px;
}

.bq-modal input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

.bq-modal-error {
    color: #a32121;
    font-size: 11px;
    margin-top: 6px;
}

.bq-modal-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.bq-btn-primary {
    flex: 1;
    background: #22a06b;
    color: #fff;
    border: none;
    border-radius: 6px;
    height: 32px;
    padding: 0 12px;
    cursor: pointer;
}

.bq-btn-secondary {
    flex: 1;
    background: #e9ecef;
    color: #212529;
    border: none;
    border-radius: 6px;
    height: 32px;
    padding: 0 12px;
    cursor: pointer;
}

/* ---------- scene list rows (mirror .spr-row) ---------- */
.scene-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid #eef0f2;
    cursor: pointer;
}

.scene-row.sel {
    background: #e7f1ff;
}

/* TEMP-DEBUG (remove before release): unmistakable marker on docked
   argblocks while tuning arg padding. Inset so row overflow can't clip it;
   outlines never affect layout. */
.bq-rep-full {
    outline: 2px dashed #ff2fb3;
    outline-offset: -2px;
}

input.bq-hole-edit {
    font: inherit;
    color: #333;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
}

/* Engine running-block highlight (JS setHighlight/clearHighlight). Outlines
   never affect layout, so live positions stay exact. */
.bq-block.bq-hot, .bq-pal.bq-hot {
    outline: 3px solid #ffd43b;
    outline-offset: 2px;
}

/* AI chat tab: bubbles, streaming caret, plan progress, thinking dots. */
.bq-chat-hint {
    font-size: 12px;
    color: #6c757d;
    background: #f8f9fa;
    border: 1px dashed #dee2e6;
    border-radius: 8px;
    padding: 10px 12px;
    white-space: pre-wrap;
}

.bq-msg {
    max-width: 92%;
    margin: 6px 0;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    animation: bq-msg-in 0.18s ease-out;
}

@keyframes bq-msg-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.bq-msg.bq-user {
    margin-left: auto;
    background: #2f7de1;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.bq-msg.bq-assistant {
    margin-right: auto;
    background: #f1f3f5;
    color: #212529;
    border-bottom-left-radius: 4px;
}

.bq-msg.bq-status {
    margin-left: auto;
    margin-right: auto;
    background: none;
    color: #8a6d00;
    font-size: 12px;
    font-style: italic;
    text-align: center;
}

.bq-caret {
    display: inline-block;
    width: 8px;
    height: 14px;
    margin-left: 2px;
    vertical-align: -2px;
    background: #2f7de1;
    animation: bq-blink 0.9s steps(2) infinite;
}

@keyframes bq-blink {
    50% { opacity: 0; }
}

.bq-plan {
    margin: 8px 0;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
}

.bq-plan-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 10px;
    font-size: 12px;
    border-top: 1px solid #f1f3f5;
    animation: bq-msg-in 0.18s ease-out;
}

.bq-plan-row:first-child {
    border-top: none;
}

.bq-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #adb5bd;
    align-self: center;
}

.bq-st-applying .bq-dot {
    background: #e08a2f;
    animation: bq-blink 0.7s steps(2) infinite;
}

.bq-st-done .bq-dot {
    background: #22a06b;
}

.bq-st-error .bq-dot {
    background: #c0392b;
}

.bq-st-skipped .bq-dot {
    background: #dee2e6;
}

.bq-st-skipped span:nth-child(2) {
    text-decoration: line-through;
    color: #868e96;
}

.bq-plan-err {
    color: #a32121;
    font-size: 11px;
}

.bq-thinking {
    display: flex;
    gap: 5px;
    padding: 8px 12px;
}

.bq-thinking span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #adb5bd;
    animation: bq-bounce 1.1s ease-in-out infinite;
}

.bq-thinking span:nth-child(2) {
    animation-delay: 0.15s;
}

.bq-thinking span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes bq-bounce {
    0%, 60%, 100% { transform: none; opacity: 0.5; }
    30% { transform: translateY(-5px); opacity: 1; }
}

.bq-reasoning {
    color: #868e96;
    font-style: italic;
    font-size: 12px;
    white-space: pre-wrap;
    opacity: 0.9;
}

.bq-settings {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 6px 8px;
    align-items: center;
    padding: 8px 12px;
    font-size: 12px;
}

.bq-settings label {
    color: #6c757d;
}

.bq-settings input {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
    min-width: 0;
}

.bq-settings .bq-btn-primary {
    grid-column: 3;
}

.bq-settings-note {
    grid-column: 1 / -1;
    color: #868e96;
    font-size: 11px;
}

.bq-input-row {
    display: flex;
    gap: 8px;
    padding: 8px 12px 12px;
}

.bq-input-row input {
    flex: 1;
    min-width: 0;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    height: 34px;
    padding: 0 10px;
    font-size: 13px;
}

.bq-input-row input:disabled {
    background: #f1f3f5;
}

.bq-approve {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px 8px;
    padding: 8px 10px;
    font-size: 12px;
    color: #8a6d00;
    background: #fff8e1;
    border: 1px solid #ffe08a;
    border-radius: 8px;
    animation: bq-msg-in 0.18s ease-out;
}

.bq-approve span {
    flex: 1;
}

.bq-ai-actions {
    display: flex;
    gap: 8px;
    padding: 0 12px 10px;
}

/* ---------- floating canvas bubble (click empty code canvas) ----------
   Anchored by its bottom middle: Blazor sets left/top to the click point in
   editor coords and this transform hangs the card above it, centered. */
.bq-canvas-prompt {
    position: absolute;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    min-width: 300px;
    max-width: 420px;
    max-height: 70%;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
    overflow: hidden;
    opacity: 0;
    transform: translate(-50%, calc(-100% + 6px));
    transition: opacity .16s ease-out, transform .16s ease-out;
}

.bq-canvas-prompt.open {
    opacity: 1;
    transform: translate(-50%, -100%);
}

@media (prefers-reduced-motion: reduce) {
    .bq-canvas-prompt { transition: none; }
}

.bq-bubble-thread {
    overflow-y: auto;
    padding: 10px 12px 4px;
    min-height: 0;
}

.bq-bubble-thread .bq-msg {
    font-size: 12px;
}

#bubbleDraft {
    overflow: hidden;
}

#bubbleDraft:empty {
    display: none;
}

.bq-bubble-review {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: #8a6d00;
    background: #fff8e1;
    border-top: 1px solid #ffe08a;
}

.bq-bubble-review span {
    flex: 1;
    min-width: 0;
}

.bq-bubble-review .bq-btn-primary,
.bq-bubble-review .bq-btn-secondary {
    flex: none;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
}

.bq-bubble-input {
    display: flex;
    gap: 8px;
    padding: 8px 12px 12px;
    border-top: 1px solid #dee2e6;
}

.bq-bubble-input input {
    flex: 1;
    min-width: 0;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    height: 40px;
    padding: 0 10px;
    font-size: 13px;
}

.bq-bubble-input input:disabled {
    background: #f1f3f5;
}

.bq-bubble-input .bq-btn-secondary {
    flex: none;
    height: 40px;
}

#btnBubbleSend {
    flex: none;
    width: 48px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: #2f7de1;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

#btnBubbleSend:hover {
    background: #2568bd;
}

#btnBubbleSend svg {
    display: block;
}

/* ---------- wide modal (app settings) ---------- */
.bq-modal.wide {
    width: 560px;
}