/* Property of Sistema THEAD. All rights reserved. */
/* ============================================================================
 * blockly.css — chrome for the Blockly block canvas.
 *
 * The blocks themselves are drawn as SVG <image> art by tj-renderer.js, so
 * almost everything here is about REMOVING Blockly's default chrome: its
 * backgrounds, borders, block outlines and highlight strokes all assume a
 * conventional Blockly look and fight the tactile artwork.
 *
 * Accessibility focus styling lives in blockly-a11y.css, not here.
 * ========================================================================== */

/* ---- canvas ------------------------------------------------------------
   The box itself is NOT defined here. #blockly-canvas is listed alongside
   #blocks-container in index/30-main.css, 80-responsive.css and
   50-camera-active.css, so it inherits the legacy canvas's size, white
   background, corner radius and camera-mode behaviour from the one place that
   has always defined them — rather than a second copy here that drifts.

   It previously carried `position: absolute; inset: 0`, which took it out of
   flow and let it escape .blocs to fill the whole main area: 1072x720 where
   the legacy canvas is 1072x360. Everything below is additive only. */
/* Present in the markup on every load, including under ?blockly=0, and it
   sits BEFORE #blocks-container in the .blocs flex column — so left visible it
   takes a flex slot and pushes the legacy canvas into the bottom half of the
   screen. It occupies nothing until tj-workspace.js has actually mounted. */
#blockly-canvas {
    display: none;
}

body[data-block-editor="blockly"] #blockly-canvas {
    display: block;
}

.tj-blockly-canvas {
    /* Touch: let Blockly own the gestures inside the canvas so a child's drag
       moves a block instead of scrolling the page. */
    touch-action: none;
    overscroll-behavior: contain;
}

/* Blockly paints its own workspace background; the app supplies the surface. */
.tj-blockly-canvas .blocklyMainBackground {
    fill: transparent;
    stroke: none;
}

.tj-blockly-canvas .injectionDiv,
.tj-blockly-canvas .blocklySvg {
    background: transparent;
}

/* ---- block art --------------------------------------------------------- */
/* The real block path is transparent (the art is an <image> on top); make sure
   nothing re-introduces a stroke around it. */
.tj-blockly-canvas .blocklyPath {
    stroke: none;
}

.tj-blockly-canvas image.tj-art {
    /* The art is decorative; the accessible name lives on the block group. */
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Blockly's drag-preview stroke and connection highlight both draw on the stub
   path, which does not match the artwork — suppress both. */
.tj-blockly-canvas .blocklyHighlightedConnectionPath,
.tj-blockly-canvas .blocklyInsertionMarker > .blocklyPath {
    stroke: none;
    fill: transparent;
}

/* ---- workspace scrollbars ---------------------------------------------
   The main-workspace scrollbar pair is VISIBLE: with drag-to-pan off by
   default, the bars plus the wheel plus the zoom controls are how a program
   longer than the screen gets reached. (They used to be hidden to match the
   legacy look; reachability wins over pixels.)

   The flyout's own scrollbar stays hidden — the palette really can run off
   the end of a small screen, and there it is the only cue that more blocks
   exist. Blockly tags workspace bars with .blocklyMainWorkspaceScrollbar,
   which is precisely the flyout/workspace discriminator wanted here.

   The bare .blocklyScrollbarBackground rule below is only the 15x15 corner
   square where the two tracks meet; it hangs off the workspace group rather
   than either bar, and stays hidden.

   Styling is app-owned and deliberately quiet: a soft-gray handle at a
   calm opacity with the rounded ends Blockly already draws (rx=8), on a
   barely-there track, so the bars read as chrome, not content. Same gray
   family as the zoom buttons. CSS `fill` beats the presentation attribute
   Blockly's theme subscription writes, so no theme override is needed. Thickness comes from
   Blockly.Scrollbar.scrollbarThickness, set in tj-workspace.js before
   inject (25px on touch per Blockly's default, 22px on desktop per us).

   !important is load-bearing, not cargo cult: Scrollbar.setVisible() writes
   `style.display = 'block'` straight onto the element, and an inline style
   beats any class selector. Without it these rules silently do nothing. */
.tj-blockly-canvas .blocklyWorkspace > .blocklyScrollbarBackground {
    display: none !important;
}

.tj-blockly-canvas .blocklyMainWorkspaceScrollbar .blocklyScrollbarBackground {
    fill: #e6ebf0 !important;
    fill-opacity: 0.6 !important;
}

.tj-blockly-canvas .blocklyMainWorkspaceScrollbar .blocklyScrollbarHandle {
    fill: #9aa5b1 !important;
    fill-opacity: 0.55 !important;
    stroke: none !important;
}

/* ---- canvas zoom controls ----------------------------------------------
   Deliberately NOT a pill: one frosted container costs a 56px-wide column
   of canvas on every screen mode. Three separate floating buttons instead
   — same 44px touch targets, a fraction of the visual weight. Soft gray
   chrome (glyphs + fills), Scratch-like: quiet against the white canvas
   and the dot grid below. Anchored to .main-area (position: relative);
   z-index clears .blocs (10). Hidden while the camera owns the canvas —
   zooming a canvas you cannot see would be a silent no-op. */
#canvas-zoom-controls {
    position: absolute;
    left: 12px;
    bottom: 56px;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 44px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

body.camera-active #canvas-zoom-controls {
    display: none;
}

#canvas-zoom-controls button {
    width: 44px;
    min-height: 44px;
    border: none;
    border-radius: 12px;
    background: rgba(226, 232, 238, 0.92);
    color: #5b6b7a;
    font-size: 26px;
    font-weight: 700;
    /* Flex centering, not line-height: glyphs like ◎ carry asymmetric
       bearings that sit visibly low under line-height centering. */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(3, 40, 63, 0.18);
}

#canvas-zoom-controls #canvas-zoom-reset {
    font-size: 22px;
}

#canvas-zoom-controls button:active {
    transform: scale(0.94);
}

/* ---- voice mute shortcut -------------------------------------------------
   Anchored to .main-area (position: relative), NOT the viewport and NOT
   the header: every screen mode restacks the header (sandbox column with
   palette, landscape rail), but the main area always starts below all of
   it — so top-right/top-left of main-area is collision-free everywhere
   without moving the logo or tracking header heights. Portrait: top-right.
   Landscape: top-left (clear of the left rail by construction — the rail's
   own logo leaves no guaranteed slot beside it). Hidden while the camera
   owns the canvas, like the zoom controls. */
#voice-mute-btn {
    position: absolute;
    z-index: 30;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 12px;
    background: rgba(226, 232, 238, 0.92);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(3, 40, 63, 0.18);
}

#voice-mute-btn[hidden] {
    display: none;
}

body.camera-active #voice-mute-btn {
    display: none;
}

@media (orientation: landscape) {
    /* One compact row at top-left: mute + zoom side by side. A short
       landscape viewport (~226px of main area) cannot fit two stacked
       44px columns without overlap — measured colliding before this. */
    #voice-mute-btn {
        right: auto;
        left: 10px;
        top: 10px;
    }
    #canvas-zoom-controls {
        flex-direction: row;
        left: 62px;
        top: 10px;
        bottom: auto;
        width: auto;
        height: 44px;
        gap: 8px;
    }
    #canvas-zoom-controls button:first-child {
        border-radius: 12px;
    }
    #canvas-zoom-controls button:last-child {
        border-radius: 12px;
    }
}

#voice-mute-btn:active {
    transform: scale(0.94);
}

/* ---- misc chrome we do not use ----------------------------------------- */
.tj-blockly-canvas .blocklyZoom,
.tj-blockly-canvas .blocklyTrash {
    display: none;
}

/* Blockly's context menu is desktop-oriented and exposes actions (inline
   inputs, collapse, disable) that make no sense for tactile blocks. */
.blocklyWidgetDiv .blocklyMenu {
    font: 500 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---- reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .tj-blockly-canvas * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ---- the block tray ----------------------------------------------------
   Blockly's flyout is NOT the palette. The app's own #sandbox-palette is,
   and it stays exactly where it was.

   That element already carries four different layouts — a bottom strip on
   desktop landscape, a top strip on desktop portrait and mobile portrait, a
   vertical left rail on mobile landscape — plus the show/hide transitions and
   the pull-tab wiring. Blockly's flyout is an SVG inside the injection div and
   cannot be position:fixed against the viewport edge, so reproducing any of
   that inside it means fighting the framework to arrive back where the CSS
   already was. Trying produced one wrong layout in all four modes.

   So the flyout is suppressed outright and tj-workspace never opens it. The
   palette keeps its own markup, its own CSS and its own reserved band; only
   what its items CREATE changed, from legacy DOM blocks to real Blockly ones. */
.tj-blockly-canvas .blocklyFlyout,
.tj-blockly-canvas .blocklyFlyoutBackground,
.tj-blockly-canvas .blocklyFlyoutScrollbar {
    display: none !important;
}

/* ---- the unsupported-action badge --------------------------------------
   A block whose action the currently-paired robot cannot perform. Set and
   cleared by blocksController.refreshWorkspaceBlockWarnings(), which puts
   `.unsupported-action` on the block's SVG root <g>. Same class name as the
   legacy editor uses on `.block-wrapper` (index/60-blocks.css) — the two
   renderings share nothing else.

   WHY NOT THE LEGACY RULE
   -----------------------
   The legacy badge is `box-shadow: 0 0 0 3px #f5a623` + a glow, on a <div>.
   box-shadow has NO effect on an SVG element, and a Blockly block is a <g>,
   so that declaration is inert here: it parses, applies, and draws nothing.
   The ring has to come out of the filter pipeline instead.

   WHY THE FILTER IS ON THE <image> AND NOT ON THE BLOCK GROUP
   ----------------------------------------------------------
   Blockly nests a connected block's <g> INSIDE its predecessor's (that is
   what makes the next block paint over the previous one's plug — see
   tj-renderer.js). `filter` applies to the whole rendered subtree, so putting
   the ring on the group would badge every block downstream of the unsupported
   one. The art <image> is the one element that is exactly this block.

   As a bonus it is the right shape: the ring follows the drawing's real alpha
   silhouette, so a Γ-shaped loop bracket gets a Γ-shaped ring rather than a
   rectangle that also frames the neighbour tucked under its arm.

   HOW THE RING IS BUILT
   ---------------------
   A zero-offset, zero-blur drop-shadow paints a silhouette copy
   directly BEHIND the art, which behind opaque artwork is invisible. A small
   NON-zero radius dilates the silhouette, so repeating one pass grows a real
   outline about a pixel at a time. Three passes ~= the legacy ring's 3px; the
   fourth, wide, translucent pass is the legacy glow.

   `grayscale()`/`brightness()` come FIRST so they tint only the artwork —
   the shadow passes name their colour explicitly and are unaffected. This is
   the same desaturation the legacy rule puts on the wrapper's <img>. */
:root {
    /* Kept in step with index/60-blocks.css by hand: the legacy sheet loads on
       pages this one does not, so there is nowhere lower to share it from. */
    --tj-unsupported-ring: #f5a623;
    --tj-unsupported-glow: rgb(245 166 35 / 55%);
}

.tj-blockly-canvas .unsupported-action > image.tj-art {
    filter:
        grayscale(40%) brightness(0.92)
        drop-shadow(0 0 1px var(--tj-unsupported-ring))
        drop-shadow(0 0 1px var(--tj-unsupported-ring))
        drop-shadow(0 0 1px var(--tj-unsupported-ring))
        drop-shadow(0 0 6px var(--tj-unsupported-glow));
}