/*
 * Copyright (c) Biovisuals Private Limited. All rights reserved.
 *
 * THE FLOATING-INSPECTOR CONTRACT (D3.1, corrected by D3.2 §1-§4).
 *
 * The surface the floating toolbar's Style action opens, replacing the D3 behaviour of
 * routing it into the asset-library bottom sheet. It hosts the SAME live control nodes
 * (`#shapeControls`, `#textTools`, and `#layerControls` where a build has one) that the
 * per-type selection handlers assemble — see utils/portraitStyleInspector.js. Nothing here
 * creates a control; everything here is presentation.
 *
 * EVERY RULE IS KEYED ON `.bv-inspector`, not on the style inspector specifically. That is the
 * D3.2 §1 requirement expressed in CSS: one window contract, reused, rather than a Shape
 * window and a Text window that drift apart. `.bv-style-inspector` is still on the host as a
 * PUBLIC selector — `contextMenu.js`'s exclusion list and the existing portrait suites match
 * on it — but no presentation depends on it.
 *
 * WHY ITS OWN STYLESHEET RATHER THAN EXTENDING THE SHEET'S RULES.
 * The sheet's contextual-edit block in `slider-container.css` is keyed on
 * `[data-bv-sheet-view="edit"] #sliderContent ...` and is built for the sheet's FULL width:
 * a `repeat(auto-fit, minmax(220px, 1fr))` grid that earns two or three columns at
 * 768-899px. This surface is deliberately a single ~320-360px column, so that grid is not just
 * unnecessary here, it would be wrong.
 */

/* ── the window ───────────────────────────────────────────────────────────────
   `position: fixed` on `document.body`: it must never become a shell grid track, because a
   track change resizes Fabric. `left`/`top`/`max-height`/`min-height` are written by JS from
   the live visual viewport; the WIDTH is a static constraint and stays declarative here so it
   cannot drift between the module and the stylesheet.

   D3.2 §1 width rule: 320-360px, never wider than the viewport minus 16px. `clamp()` states
   all three bounds at once — on a 768px portrait tablet this resolves to 360px, and it only
   starts shrinking below a 376px viewport, where 320px then becomes the floor. */
.bv-inspector {
    position: fixed;
    width: clamp(320px, 360px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* Above the floating toolbar (99999) and its submenus (100000), because the inspector can
       be clamped into contact with either on a short viewport. */
    z-index: 100002;
    background: #ffffff;
    border: 1px solid #d9dde3;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.2);
    /* Belt and braces alongside the JS clamp: even if a future caller forgets to position
       it, the device insets are still respected. */
    margin: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
            env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    overflow: hidden;   /* the BODY scrolls, so the rounded corners stay clean */
}
.bv-inspector[hidden] { display: none; }

/* ── header = the drag handle ──────────────────────────────────────────────────
   Sticky BY CONSTRUCTION rather than by `position: sticky`: it is a non-shrinking flex child
   of a bounded column and sits OUTSIDE the scrolling body, so it cannot scroll away. The same
   construction the bottom sheet's header uses.

   `touch-action: none` is scoped to THIS element only (D3.2 §3). On the host it would kill
   scrolling in the body and break every range input inside it. */
.bv-inspector__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 10px;
    border-bottom: 1px solid #eceff3;
    background: #ffffff;
    touch-action: none;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}
.bv-inspector__head.is-dragging { cursor: grabbing; }

/* A visible affordance that the header is the thing you drag. Purely decorative — the drag
   listener is on the header, so the target is the full 44px-tall row, not this 10px mark. */
.bv-inspector__grip {
    flex: 0 0 auto;
    width: 10px;
    height: 16px;
    border-radius: 2px;
    background-image: radial-gradient(circle, #c2c8d0 1px, transparent 1px);
    background-size: 5px 5px;
    background-position: 0 1px;
}
.bv-inspector__head.is-dragging .bv-inspector__grip {
    background-image: radial-gradient(circle, #8b939d 1px, transparent 1px);
}

/* The object-specific title (`Shape style` / `Text style` / `Line style` / `Image style`). */
.bv-inspector__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Arial', 'Helvetica', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1b263b;
}

/* The close control. `cursor: pointer` and its own `touch-action` deliberately override the
   header's, so it never reads as part of the drag surface; the JS also excludes every button
   in the header from starting a drag, so the two agree. */
.bv-inspector__close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    /* A real touch target, not a 16px glyph. */
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #52606d;
    font-size: 16px;
    cursor: pointer;
    touch-action: manipulation;
}
.bv-inspector__close:hover { background: #eef1f5; }
.bv-inspector__close:focus-visible { outline: 2px solid #ff6f00; outline-offset: 2px; }

/* ── body = the ONLY scrolling region ─────────────────────────────────────────
   `overscroll-behavior: contain` stops a flick that reaches the end of this list from
   scrolling the page behind it, which on a tablet reads as the canvas jumping.

   `touch-action` is restored to the default here so the header's `none` cannot leak in and
   disable touch scrolling or drag-to-set on a range input. */
.bv-inspector__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: auto;
    padding: 10px 12px 12px;

    /* Firefox: the same thin native scrollbar as the slide navigator. */
    scrollbar-width: thin;
    scrollbar-color: rgba(16, 24, 40, 0.22) transparent;
}

/* ── THIN SCROLLBAR (Chromium/WebKit) ─────────────────────────────────────────
   The SAME treatment as the slide navigator (`slides-rightPanel.css`): 6px, transparent
   track, neutral semi-transparent fully-rounded thumb that darkens on hover or keyboard
   focus, and no arrow buttons or corner patch. Scoped to this body only, exactly as the
   navigator's is scoped to `#canvas-previews`, so no other scrolling region changes. */
.bv-inspector__body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.bv-inspector__body::-webkit-scrollbar-track {
    background: transparent;
}

.bv-inspector__body::-webkit-scrollbar-thumb {
    background-color: rgba(16, 24, 40, 0.18);
    border-radius: 999px;
    transition: background-color 0.16s ease;
}

.bv-inspector:hover .bv-inspector__body::-webkit-scrollbar-thumb,
.bv-inspector__body:focus-within::-webkit-scrollbar-thumb,
.bv-inspector__body:hover::-webkit-scrollbar-thumb {
    background-color: rgba(16, 24, 40, 0.3);
}

.bv-inspector__body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(16, 24, 40, 0.42);
}

.bv-inspector__body::-webkit-scrollbar-button,
.bv-inspector__body::-webkit-scrollbar-corner {
    display: none;
}

/* Firefox equivalent of the hover darkening. */
.bv-inspector:hover .bv-inspector__body,
.bv-inspector__body:focus-within {
    scrollbar-color: rgba(16, 24, 40, 0.3) transparent;
}

/* ── the adopted control panels: ONE column, NO SECOND CARD ───────────────────
   D3.2 §4. Both `#shapeControls` and `#textTools` are authored as standalone desktop cards —
   `#textTools` carries `padding: 14px; background: #fff; border: 1px solid #e7e7e7;
   border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.06); max-width: 280px` in
   `text-tools.css`, and `#shapeControls` has the equivalent panel framing. Inside an
   already-framed window that reads as a panel inside a panel, and the 280px cap leaves a dead
   strip down the right-hand side of a 360px window.

   EVERY RULE HERE IS SCOPED TO `.bv-inspector__body >`. The desktop docked presentation and
   the sheet presentation of these same nodes are untouched: the moment the node is handed back
   to `#sliderContent`, this selector stops matching and its own stylesheet applies again. */
/* The two selectors carry the SAME declarations on purpose, and the id list is not redundant:
   `text-tools.css` and `shape-container.css` author their panels through ID selectors
   (`#textTools { border: 1px solid #e7e7e7; ... }`), which at specificity (1,0,0) beat a class
   selector at (0,1,0). Without the id-scoped companion the card would survive inside the window
   and the whole §4 correction would be silently inert. `!important` would also work and is
   deliberately not used — it would leak past any future scoping and is harder to reason about
   than stating the specificity plainly. */
.bv-inspector__body > *,
.bv-inspector__body > #textTools,
.bv-inspector__body > #shapeControls,
.bv-inspector__body > #layerControls {
    width: 100%;
    max-width: none;   /* releases #textTools's 280px desktop cap */
    box-sizing: border-box;
    display: block;
    /* The window IS the card. Strip the inner one. */
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* The window header already names the surface (`Text style`, `Shape style`, ...); a second
   heading inside the panel would repeat it. */
.bv-inspector__body > #shapeControls > h3,
.bv-inspector__body > #layerControls > h3,
.bv-inspector__body > #textTools > .textToolsHeader {
    display: none;
}

/* `#textTools` is `display: flex; flex-direction: column; gap: 12px` in its own stylesheet.
   The `display: block` above removes that gap, so the spacing is restated per row — one
   number, in one place, instead of relying on a flex context this surface does not use. */
.bv-inspector__body > #shapeControls > .section,
.bv-inspector__body > #shapeControls > #imageFiltersSection,
.bv-inspector__body > #shapeControls > #dropShadowSection,
.bv-inspector__body > #textTools > .form-group,
.bv-inspector__body > #textTools > .textPresetRow {
    margin-bottom: 12px;
}
.bv-inspector__body > #shapeControls > :last-child,
.bv-inspector__body > #textTools > :last-child {
    margin-bottom: 0;
}

/* ── finger-sized controls ────────────────────────────────────────────────────
   Presentation only. Every `input`/`change` listener — and therefore every style
   transaction these controls open and commit — is untouched. */
.bv-inspector__body .color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bv-inspector__body .color-swatches .swatch {
    /* Comfortable for a finger without turning the row into a wall. */
    width: 32px;
    height: 32px;
}

.bv-inspector__body input[type="range"] {
    width: 100%;
    height: 32px;
}

.bv-inspector__body select,
.bv-inspector__body input[type="number"],
.bv-inspector__body input[type="text"] {
    min-height: 40px;
    width: 100%;
    box-sizing: border-box;
}

.bv-inspector__body .button-group button,
.bv-inspector__body .input-group button,
.bv-inspector__body .presetChip,
.bv-inspector__body .width-btn,
.bv-inspector__body .stroke-style-btn,
.bv-inspector__body .stroke-cap-btn {
    min-width: 40px;
    min-height: 40px;
}

/* `.input-group` is a row of [-] [value] [+]; the blanket `width: 100%` above would otherwise
   stretch each button to the full column. */
.bv-inspector__body .input-group,
.bv-inspector__body .button-group {
    display: flex;
    gap: 8px;
    align-items: center;
}
.bv-inspector__body .input-group > button {
    width: auto;
    flex: 0 0 auto;
}

/* ── presentation ─────────────────────────────────────────────────────────────
   Same rule and same class as the rest of the portrait chrome (`portraitBottomBar.css`):
   `bv-presenting`, never the dormant `presenting`. */
body.bv-presenting .bv-inspector { display: none !important; }