/* =========================================================
   See in Your Room — Plugin Styles  v2.0
   ========================================================= */

/* Trigger button */
.siyr-trigger {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        margin: 12px 0;
        background: #1a1a1a;
        color: #fff !important;
        border: none;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.03em;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.1s ease;
}
.siyr-trigger:hover  { background: #333; }
.siyr-trigger:active { transform: scale(0.98); }
.siyr-trigger svg {
        width: 18px;
        height: 18px;
        fill: currentColor;
}

/* ---- Screen-reader only ---- */
.siyr-sr-only {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
}

/* Contain the file input within the label so the browser scrolls to
   the visible label (not an off-screen absolute position) when activated */
.siyr-dropzone { position: relative; }

/* Step visibility — class-based so no theme can interfere */
.siyr-step            { display: none !important; }
.siyr-step.siyr-active { display: flex !important; flex-direction: column; }

/* ---- Modal shell ---- */
.siyr-modal {
        position: fixed;
        top: 0; right: 0; bottom: 0; left: 0;
        z-index: 999999;
        display: flex !important;
        align-items: center;
        justify-content: center;
        /* Prevent the page behind from scrolling/sliding on touch */
        touch-action: none;
        overscroll-behavior: none;
}
.siyr-modal[hidden] { display: none !important; }

.siyr-modal__backdrop {
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        background: rgba(79, 83, 91, 0.92);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
}

.siyr-modal__dialog {
        position: relative;
        z-index: 1;
        background: #fff;
        border-radius: 12px;
        width: min(92vw, 900px);
        height: 96vh;
        max-height: 96vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: 0 32px 80px rgba(0,0,0,0.55), 0 8px 24px rgba(0,0,0,0.35);
        /* Prevent horizontal swipe/pan from shifting the dialog */
        touch-action: pan-y;
        overscroll-behavior: contain;
}

/* Hide toolbar while on the upload step — uses modal-level class set by JS
   so theme CSS cannot resurrect it by overriding step-canvas visibility */
#siyr-modal.siyr-on-upload .siyr-toolbar { display: none !important; }

.siyr-modal__close {
        position: absolute;
        top: 14px; right: 14px;
        z-index: 10;
        background: rgba(255,255,255,0.9);
        border: none;
        border-radius: 50%;
        width: 36px; height: 36px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        transition: background 0.2s;
}
.siyr-modal__close { background: #4b505e; }
.siyr-modal__close:hover { background: #3a3e4a; }
.siyr-modal__close svg {
        width: 18px; height: 18px;
        stroke: #fff; stroke-width: 2.5;
        fill: none;
}

/* ---- Step shared ---- */
.siyr-step { flex: 1; display: flex; flex-direction: column; }

/* ---- Step 1: Upload ---- */
#siyr-step-upload {
        padding: 20px 20px 16px;
        align-items: center;
        text-align: center;
        overflow-y: auto;
}
.siyr-title {
        margin: 0 0 10px;
        font-size: 22px;
        font-weight: 700;
        color: #111;
        line-height: 1.3;
}
.siyr-subtitle {
        margin: 0 0 16px;
        font-size: 15px;
        color: #555;
}
.siyr-painting-name { font-style: normal; font-weight: 700; }
.siyr-painting-name::before { content: '\201C'; }
.siyr-painting-name::after  { content: '\201D'; }

.siyr-upload-headline {
        font-size: 22px;
        font-weight: 700;
        color: #111;
        line-height: 1.3;
        margin: 0 0 12px;
        text-align: center;
        max-width: 480px;
}

/* ── Upload card heading + numbered tips ────────────────────────────── */
.siyr-upload-card__heading {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #999;
        margin: 0 0 8px;
}
.siyr-upload-tips-list {
        margin: 0;
        padding: 0 0 0 18px;
        list-style: decimal;
        display: flex;
        flex-direction: column;
        gap: 8px;
}
.siyr-upload-tips-list li {
        font-size: 14px;
        color: #333;
        line-height: 1.5;
        padding-left: 3px;
}
.siyr-upload-tips-list li strong { color: #111; }

/* ── Step-line progress bar ──────────────────────────────── */
.siyr-step-line {
        display: flex;
        width: 100%;
        gap: 3px;
        flex-shrink: 0;
}
.siyr-step-seg {
        flex: 1;
        height: 5px;
        background: #e0e0e0;
        transition: background 0.35s ease;
}
.siyr-step-seg.siyr-journey-step--active { background: #888; }
.siyr-step-seg.siyr-journey-step--done   { background: #34c759; }
.siyr-upload-divider {
        width: 100%;
        max-width: 340px;
        height: 1px;
        background: #e8e8e8;
        margin: 4px 0 20px;
}
/* ── Upload step before/after showcase ─────────────────────────────── */
/* Showcase and old photo-tips card hidden — replaced by illustrated steps */
.siyr-showcase { display: none; }
.siyr-upload-card { display: none; }

/* ── How it works — illustrated 3-step strip ─────────────────── */
.siyr-howto {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        max-width: 440px;
        margin: 0 0 16px;
}
.siyr-howto__step {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        flex: 1;
        min-width: 0;
}
.siyr-howto__svg {
        width: 100%;
        max-width: 80px;
        height: auto;
        display: block;
}
.siyr-howto__label {
        font-size: 11px;
        font-weight: 600;
        color: #555;
        text-align: center;
        line-height: 1.4;
        margin: 0;
        letter-spacing: 0.01em;
}
.siyr-howto__arrow {
        color: #ccc;
        font-size: 20px;
        align-self: center;
        flex-shrink: 0;
        padding: 0 2px;
        margin-top: -18px;
        line-height: 1;
}

/* ── Upload step photo tips ─────────────────────────────── */
.siyr-upload-tips {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0 0 10px;
        width: 100%;
        max-width: 400px;
        text-align: left;
}
.siyr-upload-tip {
        font-size: 14px;
        color: #333;
        line-height: 1.45;
        padding-left: 22px;
        position: relative;
}
.siyr-upload-tip::before {
        content: '→';
        position: absolute;
        left: 0;
        color: #999;
        font-size: 13px;
}
.siyr-upload-tip strong { font-weight: 700; color: #111; }
.siyr-upload-why {
        font-size: 12px;
        color: #999;
        font-style: italic;
        line-height: 1.4;
        margin: 0 0 22px;
        max-width: 400px;
}

.siyr-dropzone {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
        width: 100%;
        max-width: 480px;
        flex: 1;
        min-height: 160px;
        padding: 24px;
        background: #2a2a2a;
        border: none;
        border-radius: 14px;
        cursor: pointer;
        transition: background 0.2s;
        box-sizing: border-box;
}
.siyr-dropzone:hover,
.siyr-dropzone.siyr-drag-over {
        background: #111;
}
.siyr-dropzone__icon svg {
        width: 52px; height: 52px;
        stroke: rgba(255,255,255,0.7); stroke-width: 1.5; fill: none;
}
.siyr-dropzone__text {
        font-size: 16px; font-weight: 600; color: #fff;
}
.siyr-dropzone__hint {
        font-size: 13px; color: rgba(255,255,255,0.5);
}
.siyr-dropzone__tips {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        width: 100%;
        padding-top: 14px;
        margin-top: 4px;
        border-top: 1px solid rgba(255,255,255,0.12);
}
.siyr-dropzone__tip {
        font-size: 12px;
        color: rgba(255,255,255,0.5);
        text-align: center;
        line-height: 1.45;
        letter-spacing: 0.015em;
}
.siyr-dropzone__tip strong {
        color: rgba(255,255,255,0.82);
        font-weight: 600;
}

/* ---- Scale row ---- */
.siyr-scale-row {
        margin-top: 20px;
        padding: 16px 20px 14px;
        background: #f7f7f7;
        border: 1px solid #e5e5e5;
        border-radius: 8px;
        width: 100%;
        max-width: 480px;
        text-align: center;
}
.siyr-scale-heading {
        margin: 0 0 12px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: rgba(255,255,255,0.75);
}
.siyr-scale-fields {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
}
.siyr-scale-sep {
        font-size: 13px;
        color: #999;
}
.siyr-scale-field {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
}
.siyr-scale-field label {
        font-size: 11px;
        font-weight: 600;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin: 0;
}
.siyr-scale-input-wrap {
        display: flex;
        align-items: center;
        gap: 3px;
        background: #fff;
        border: 1.5px solid #ddd;
        border-radius: 6px;
        padding: 0 8px;
        transition: border-color 0.2s;
}
.siyr-scale-input-wrap:focus-within { border-color: #1a1a1a; }
.siyr-scale-input-wrap input[type="number"] {
        width: 62px;
        padding: 7px 0;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 16px;
        font-weight: 600;
        color: #111;
        text-align: center;
        outline: none;
        -moz-appearance: textfield;
}
.siyr-scale-input-wrap input[type="number"]::-webkit-outer-spin-button,
.siyr-scale-input-wrap input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
}
.siyr-scale-unit {
        font-size: 12px;
        color: #aaa;
        font-weight: 500;
}
.siyr-scale-note {
        margin: 10px 0 0;
        font-size: 11px;
        color: #bbb;
}

/* ---- Step 2: Canvas ---- */
/* background:#111 fills the space below the photo (canvas-wrap is transparent on
   desktop; the dark comes from the parent so no black bars on the photo itself).
   Safe since v2.9.103 moved the scale-success toast inside canvas-wrap (no longer
   a flex sibling that would produce a visible dark strip between photo and toast). */
#siyr-step-canvas { overflow: hidden; position: relative; background: #111; }

.siyr-canvas-wrap {
        position: relative;
        flex: 1;
        overflow: hidden;
        background: transparent;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        min-height: 0;
}

.siyr-canvas {
        position: relative;
        display: inline-block;
        line-height: 0;
        max-width: 100%;
        max-height: 100%;
        overflow: hidden;
        touch-action: none;
}

.siyr-room-img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        user-select: none;
}

/* Painting overlay */
.siyr-painting-wrap {
        position: absolute;
        cursor: grab;
        user-select: none;
        /* Drop shadow */
        box-shadow: 0 6px 24px rgba(0,0,0,0.40), 0 2px 8px rgba(0,0,0,0.25);
}
.siyr-painting-wrap.siyr-dragging { cursor: grabbing; }

/* Frame overlay — proportional 0.25" border, thickness set by JS via CSS var */
.siyr-painting-wrap::after {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        border: var(--siyr-frame-px, 3px) solid #111;
        pointer-events: none;
        z-index: 2;
        box-sizing: border-box;
}

.siyr-painting-img {
        display: block;
        width: 100%; height: 100%;
        object-fit: fill;
        pointer-events: none;
        user-select: none;
}

/* Dimension label badge */
.siyr-dim-label {
        display: none;
        position: absolute;
        bottom: 6px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0,0,0,0.62);
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
        padding: 4px 8px;
        border-radius: 3px;
        white-space: nowrap;
        pointer-events: none;
        user-select: none;
        letter-spacing: 0.04em;
}

/* Hide handles when toggle is off */
.siyr-handles-hidden .siyr-handle { opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.siyr-handle { transition: opacity 0.15s; }

/* Resize handles — rounded-square with 3×3 grip-dot indicator */
.siyr-handle {
        position: absolute;
        width: 20px; height: 20px;
        background: #1a1a1a;
        border: 1.5px solid rgba(255,255,255,0.30);
        border-radius: 5px;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
}
.siyr-handle::before {
        content: '';
        display: block;
        width: 9px; height: 9px;
        background-image: radial-gradient(circle, rgba(255,255,255,0.80) 1px, transparent 1px);
        background-size: 4px 4px;
        background-repeat: repeat;
        flex-shrink: 0;
}
.siyr-handle--nw { top: -10px;    left: -10px;   cursor: nw-resize; }
.siyr-handle--ne { top: -10px;    right: -10px;  cursor: ne-resize; }
.siyr-handle--sw { bottom: -10px; left: -10px;   cursor: sw-resize; }
.siyr-handle--se { bottom: -10px; right: -10px;  cursor: se-resize; }

/* Larger handles on touch screens */
@media (hover: none) and (pointer: coarse) {
        .siyr-handle {
                width: 32px; height: 32px;
                border-width: 2px;
                border-radius: 7px;
        }
        .siyr-handle::before {
                width: 13px; height: 13px;
                background-size: 5px 5px;
        }
        .siyr-handle--nw { top: -16px;    left: -16px; }
        .siyr-handle--ne { top: -16px;    right: -16px; }
        .siyr-handle--sw { bottom: -16px; left: -16px; }
        .siyr-handle--se { bottom: -16px; right: -16px; }
}

/* Off-scale warning bar — position:absolute sibling of canvas-wrap inside #siyr-step-canvas.
   bottom:0 on desktop; overridden to bottom:66px on mobile (see mobile media query) to sit
   above the absolute-positioned toolbar without obscuring it. */
.siyr-offscale-bar {
        display: none;
        position: absolute;
        bottom: 0; left: 0; right: 0;
        background: rgba(195, 100, 0, 0.95);
        color: #fff;
        padding: 10px 16px;
        z-index: 20;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        font-weight: 500;
        box-sizing: border-box;
        line-height: 1.35;
}
.siyr-offscale-bar--visible { display: flex; }
.siyr-offscale-bar__text { flex: 1; }
.siyr-offscale-snap {
        background: rgba(255,255,255,0.18);
        border: 1.5px solid rgba(255,255,255,0.45);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        padding: 6px 12px;
        border-radius: 5px;
        cursor: pointer;
        white-space: nowrap;
        flex-shrink: 0;
        line-height: 1;
        font-family: inherit;
}
.siyr-offscale-snap:hover { background: rgba(255,255,255,0.30); }

/* Toolbar */
.siyr-toolbar {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 10px 12px;
        background: rgba(18,18,18,0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: none;
}
.siyr-toolbar__actions {
        display: flex;
        gap: 8px;
}
.siyr-toolbar__actions .siyr-btn {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        text-align: center;
        font-size: 13px;
        padding: 12px 8px;
        border-radius: 10px;
}
/* Hide toolbar when canvas step is not active (upload screen) */
#siyr-step-canvas:not(.siyr-active) .siyr-toolbar { display: none !important; }
/* While calibration panel is open:
   Desktop — toolbar stays in the flex layout so canvas-wrap size is stable.
   Cal-bubble (position:absolute, z-index:10) covers the toolbar area; pointer-events:none
   makes the toolbar buttons bullet-proof unreachable.
   Mobile — toolbar is position:absolute (out of flex flow already); display:none just
   hides it, and the cal-bubble at the same bottom:0 position takes over visually. */
.siyr-cal-open .siyr-toolbar { pointer-events: none; }
.siyr-painting-wrap { transition: opacity 0.2s ease; }
.siyr-cal-open .siyr-painting-wrap { opacity: 0; pointer-events: none; }
/* iOS save tip */
.siyr-save-tip {
        width: 100%;
        margin: 8px 0 0;
        padding: 8px 12px;
        background: #f0f7ff;
        border: 1px solid #c3daf9;
        border-radius: 5px;
        font-size: 12px;
        color: #1a4a80;
        line-height: 1.4;
}
.siyr-save-tip[hidden] { display: none !important; }

.siyr-btn {
        padding: 8px 18px;
        border-radius: 5px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        border: none;
        transition: background 0.15s, transform 0.1s;
}
.siyr-btn:active { transform: scale(0.97); }

.siyr-btn--primary { background: rgba(255,255,255,0.13); color: #fff !important; }
.siyr-btn--primary:hover { background: rgba(255,255,255,0.22); }
.siyr-btn--primary.siyr-btn--active,
.siyr-btn--primary.siyr-scale-active {
        background: rgba(255,255,255,0.2);
        box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25);
}

.siyr-btn--outline {
        background: #fff;
        color: #333;
        border: 1.5px solid #ccc;
}
.siyr-btn--outline:hover { border-color: #999; }

/* ---- Share button ---- */
.siyr-btn--text { background: rgba(255,255,255,0.13); color: #fff !important; }
.siyr-btn--text:hover { background: rgba(255,255,255,0.22); }

/* ── Set Scale apply button — matches crosshair red ──────── */
#siyr-cal-apply {
        background: #e53e3e;
}
#siyr-cal-apply:hover {
        background: #c53030;
}

/* ---- Scale-active state (after calibration is applied) ---- */
.siyr-btn--outline.siyr-scale-active {
        background: #1a1a1a;
        color: #fff;
        border-color: #1a1a1a;
}
.siyr-btn--outline.siyr-scale-active:hover {
        background: #333;
        border-color: #333;
        color: #fff;
}

/* ---- Responsive ---- */
/* ---- Calibration overlay (floats inside .siyr-canvas) ---- */
.siyr-cal-overlay {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 20;
        /* Let clicks fall through to badge siblings; pins opt back in below */
        pointer-events: none;
}
.siyr-cal-svg {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        pointer-events: none;
        overflow: visible;
}
.siyr-cal-pin {
        position: absolute;
        width: 44px;
        height: 44px;
        margin-left: -22px;
        margin-top: -22px;
        cursor: grab;
        user-select: none;
        touch-action: none;
        pointer-events: auto;
        z-index: 22;
        opacity: 0.78;
        /* smooth snap-back after touch lift; no transform transition during drag (overridden below) */
        transition: opacity 0.1s, transform 0.18s ease-out;
}
.siyr-cal-pin:hover,
.siyr-cal-pin.siyr-cal-pin--dragging {
        opacity: 1;
        cursor: grabbing;
}
/* Float the pin above the finger during touch so the crosshair centre is visible.
   The logical position (left/top) stays at the real touch coordinate;
   only the visual lifts. On finger-lift the transition snaps it back smoothly. */
.siyr-cal-pin.siyr-cal-pin--touch-dragging {
        transform: translateY(-68px);
        transition: opacity 0.1s; /* suppress transform transition while dragging — instant response */
        opacity: 1;
        z-index: 30;
}
.siyr-cal-pin__svg {
        width: 44px;
        height: 44px;
        display: block;
        overflow: visible;
}
/* A / B badge clipped to the top-right corner of each pin */
.siyr-cal-pin__label {
        position: absolute;
        top: -4px;
        right: -4px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #e53e3e;
        border: 2px solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 9px;
        font-weight: 900;
        color: #fff;
        pointer-events: none;
        line-height: 1;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        letter-spacing: 0;
        z-index: 23;
}
/* Pulse on first show — signals the pins are draggable */
@keyframes siyr-pin-pulse {
        0%, 100% { transform: scale(1);    opacity: 0.78; }
        50%       { transform: scale(1.22); opacity: 1;    }
}
.siyr-cal-pin--hint { animation: siyr-pin-pulse 0.75s ease-in-out 3; }
.siyr-cal-bubble {
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 0;
        background: #1e9b55;
        border-top: 2px solid rgba(0,0,0,0.07);
        padding: 10px 20px 12px;
        box-sizing: border-box;
        width: 100%;
        flex-shrink: 0;
}
.siyr-cal-open .siyr-cal-bubble { display: flex; position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; }
.siyr-cal-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
}

/* 2-step calibration guide — compact centered single-line rows */
.siyr-cal-steps {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
}
.siyr-cal-steps li {
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
}
.siyr-cal-step-n {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: rgba(255,255,255,0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 800;
        color: #175c2e;
        line-height: 1;
}
.siyr-cal-step-text {
        font-size: 14px;
        color: #fff;
        line-height: 1.2;
}
.siyr-cal-step-text strong {
        color: #fff;
        font-weight: 700;
}
/* Skip — ghost on green */
.siyr-cal-skip {
        background: none;
        border: 1.5px solid rgba(255,255,255,0.75);
        border-radius: 8px;
        color: #fff;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        padding: 0 14px;
        height: 40px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        font-family: inherit;
        letter-spacing: 0.01em;
}
.siyr-cal-skip:hover { color: #fff; border-color: rgba(255,255,255,0.8); }
.siyr-cal-input-wrap {
        display: flex;
        align-items: center;
        gap: 4px;
        background: rgba(255,255,255,0.92);
        border: 1px solid rgba(255,255,255,0.5);
        border-radius: 8px;
        padding: 0 8px 0 10px;
        height: 40px;
        box-sizing: border-box;
}
.siyr-cal-input-wrap input[type="number"] {
        width: 60px;
        padding: 8px 0;
        height: auto;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 18px;
        font-weight: 700;
        color: #111;
        text-align: center;
        outline: none;
        -moz-appearance: textfield;
        letter-spacing: -0.01em;
}
.siyr-cal-input-wrap input[type="number"]::-webkit-outer-spin-button,
.siyr-cal-input-wrap input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
}
.siyr-cal-unit {
        font-size: 13px;
        color: #175c2e;
        font-weight: 600;
}


.siyr-cal-custom {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
}
#siyr-cal-apply {
        padding: 0 18px;
        height: 40px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 600;
        border-radius: 8px;
        border: 1.5px solid transparent;
        letter-spacing: 0.03em;
}
.siyr-cal-custom-label {
        font-size: 11px;
        color: #fff;
        white-space: nowrap;
}
.siyr-cal-step2-label { display: none; }


/* ── Set-scale pulse beacon (draws eye to button) ─────────── */
@keyframes siyr-pulse-beacon {
        0%   { box-shadow: 0 0 0 0 rgba(229,62,62,0.6); }
        70%  { box-shadow: 0 0 0 11px rgba(229,62,62,0); }
        100% { box-shadow: 0 0 0 0 rgba(229,62,62,0); }
}
#siyr-scale-btn.siyr-scale-pulse {
        animation: siyr-pulse-beacon 1.6s ease-out infinite;
}

/* ── Calibration hint badge (disappears once scale is confirmed) ─ */
.siyr-scale-badge {
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(130, 80, 0, 0.92);
        color: #fff;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.35;
        padding: 10px 16px 12px;
        border-radius: 8px;
        pointer-events: auto;
        z-index: 20;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        max-width: 260px;
        box-sizing: border-box;
}
.siyr-scale-badge strong { font-weight: 700; }
.siyr-scale-badge__text { white-space: normal; line-height: 1.4; }
.siyr-scale-later {
        background: rgba(255,255,255,0.15);
        border: 1.5px solid rgba(255,255,255,0.45);
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        padding: 5px 14px;
        border-radius: 4px;
        cursor: pointer;
        white-space: nowrap;
        font-family: inherit;
        -webkit-appearance: none;
        appearance: none;
        letter-spacing: 0.02em;
}
.siyr-scale-later:active { background: rgba(255,255,255,0.3); }

/* ── Scale education banner (appears when photo is placed) ── */
.siyr-scale-banner {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 12px;
        background: rgba(255, 196, 0, 0.08);
        border: 1px solid rgba(255, 196, 0, 0.28);
        border-radius: 8px;
        animation: siyr-banner-in 0.35s ease both;
}
@keyframes siyr-banner-in {
        from { opacity: 0; transform: translateY(-5px); }
        to   { opacity: 1; transform: translateY(0); }
}
.siyr-scale-banner[hidden] { display: none !important; }
.siyr-scale-banner__icon {
        flex-shrink: 0;
        color: rgba(255, 200, 0, 0.9);
        margin-top: 1px;
}
.siyr-scale-banner__body {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
}
.siyr-scale-banner__body strong {
        font-size: 12px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.95);
        line-height: 1.3;
}
.siyr-scale-banner__body span {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.62);
        line-height: 1.45;
        white-space: normal;
}
.siyr-scale-banner__close {
        flex-shrink: 0;
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.45);
        font-size: 18px;
        line-height: 1;
        padding: 0 0 0 4px;
        cursor: pointer;
        font-family: inherit;
        -webkit-appearance: none;
        appearance: none;
}
.siyr-scale-banner__close:hover { color: rgba(255, 255, 255, 0.8); }

/* ── First-use drag tip (auto-fades after ~3 s) ─────────── */
.siyr-use-tip {
        position: absolute;
        top: 14px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(10,10,10,0.82);
        color: #fff;
        font-size: 13px;
        padding: 9px 18px;
        border-radius: 24px;
        white-space: nowrap;
        z-index: 30;
        pointer-events: none;
        animation: siyr-tip-fade 3.2s ease forwards;
}
@keyframes siyr-tip-fade {
        0%   { opacity: 0; transform: translateX(-50%) translateY(4px); }
        15%  { opacity: 1; transform: translateX(-50%) translateY(0);   }
        75%  { opacity: 1; }
        100% { opacity: 0; }
}

/* ── Mobile — full-screen modal, simplified toolbar ─────── */
@media (max-width: 600px), (hover: none) and (pointer: coarse) {

        /* Full-screen dialog */
        .siyr-modal { align-items: stretch; justify-content: stretch; padding: 0; }
        .siyr-modal__dialog {
                width: 100% !important;
                max-width: 100% !important;
                height: 100% !important;
                max-height: 100% !important;
                border-radius: 0 !important;
        }

        /* Upload step */
        #siyr-step-upload { padding: 48px 14px 12px; }

        /* Canvas-wrap is collapsed to imgH by fitCanvas() on mobile, so the photo
           fills it exactly — no dark gaps. background:#111 on the parent
           (#siyr-step-canvas) covers the space between wrap-bottom and toolbar. */
        .siyr-canvas-wrap { flex: 1; min-height: 0; background: #111 !important; }
        .siyr-canvas { max-height: 100% !important; }
        .siyr-room-img { max-height: 100% !important; }

        /* Toolbar: floats over the bottom of step-canvas, out of flex flow */
        .siyr-toolbar {
                position: absolute;
                bottom: 0; left: 0; right: 0;
                z-index: 5;
                flex-direction: column;
                align-items: stretch;
                padding: 10px 10px;
                gap: 8px;
                background: rgba(18,18,18,0.96);
                backdrop-filter: blur(16px);
                -webkit-backdrop-filter: blur(16px);
                border-top: none;
        }
        /* Hide toolbar while calibration panel is open */
        .siyr-cal-open .siyr-toolbar { display: none; }
        .siyr-toolbar__actions {
                display: flex;
                width: 100%;
                gap: 6px;
                flex-wrap: nowrap;
        }
        .siyr-toolbar__actions .siyr-btn {
                flex: 1;
                padding: 13px 8px;
                font-size: 12px;
                border-radius: 10px;
                text-align: center;
                min-width: 0;
                white-space: nowrap;
        }

        /* Nudge strip: hidden — step indicator + Remeasure replace it */
        .siyr-scale-nudge { display: none !important; }

        /* Remeasure link */
        .siyr-remeasure-btn {
                display: block;
                background: none;
                border: none;
                color: #888;
                font-size: 12px;
                text-decoration: underline;
                text-underline-offset: 2px;
                text-align: center;
                padding: 6px 0 2px;
                width: 100%;
                cursor: pointer;
                font-family: inherit;
        }

        /* Calibration bubble: wrap on small screens */
        .siyr-cal-bubble {
                flex-wrap: wrap;
                justify-content: center;
                white-space: normal;
                padding: 10px 12px;
                gap: 8px;
        }
        /* Prevent iOS from zooming in when number inputs are focused
           (iOS zooms any input with font-size < 16px and doesn't always zoom back) */
        .siyr-cal-input-wrap input[type="number"],
        .siyr-scale-input-wrap input[type="number"] {
                font-size: 16px !important;
        }
}

/* ── Scale-to-room hint banner (slides in after upload, dismissed on calibration) ── */
#siyr-modal .siyr-scale-hint {
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        padding: 0 16px;
        background: #fffbf0;
        border-bottom: 1px solid #e8dcc8;
        flex-shrink: 0;
        box-sizing: border-box;
        transition: max-height 0.4s ease, opacity 0.3s ease,
                    padding-top 0.35s ease, padding-bottom 0.35s ease;
}
#siyr-modal .siyr-scale-hint--visible {
        max-height: 120px;
        opacity: 1;
        padding-top: 12px;
        padding-bottom: 12px;
}
#siyr-modal .siyr-scale-hint__body {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
}
#siyr-modal .siyr-scale-hint__text {
        font-size: 13px;
        color: #333;
        line-height: 1.55;
        flex: 1;
        min-width: 0;
}
#siyr-modal .siyr-scale-hint__text strong { color: #111; font-weight: 700; }
/* Mobile: stack text and button */
@media (max-width: 600px), (hover: none) and (pointer: coarse) {
        #siyr-modal .siyr-scale-hint {
                background: #fff8e6 !important;
                border-bottom: 2px solid #e0a800 !important;
                padding-left: 14px !important;
                padding-right: 14px !important;
        }
        #siyr-modal .siyr-scale-hint--visible { max-height: 160px; }
        #siyr-modal .siyr-scale-hint__body { flex-direction: column; align-items: flex-start; gap: 8px; }
        #siyr-modal .siyr-scale-hint__text { font-size: 13px; }
}

/* ── Scale feedback toast ─────────────────────────────────────────────── */
/* Absolutely positioned over canvas-wrap — never in layout flow so the
   room photo never shifts. On desktop: bottom:0. On mobile: overridden to
   top:0 (see mobile media query) so it never covers the bottom toolbar. */
#siyr-modal .siyr-scale-toast {
        display: flex;
        flex-direction: row;
        align-items: center;
        background: #1e9b55;
        color: #fff;
        padding: 16px 60px 16px 20px;
        box-sizing: border-box;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 8;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease;
}
#siyr-modal .siyr-scale-toast--visible {
        opacity: 1;
        pointer-events: auto;
}
#siyr-modal .siyr-scale-toast__body {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        text-align: center;
}
#siyr-modal .siyr-scale-toast__headline {
        display: block;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.35;
        letter-spacing: 0.01em;
        color: #fff;
}
#siyr-modal .siyr-scale-toast__sub {
        display: block;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.45;
        color: rgba(255,255,255,0.9);
}
#siyr-modal .siyr-scale-toast__close {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255,255,255,0.18);
        border: none;
        border-radius: 50%;
        color: #fff;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        padding: 0;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: background 0.15s;
        font-family: inherit;
}
#siyr-modal .siyr-scale-toast__close:hover { background: rgba(255,255,255,0.32); }

/* On mobile the toolbar is position:absolute ~66px tall at the very bottom of
   step-canvas. Park the toast and off-scale bar just above it so they never
   overlap the toolbar buttons. */
@media (max-width: 600px), (hover: none) and (pointer: coarse) {
        #siyr-modal .siyr-scale-toast {
                bottom: 66px;
                top: auto;
                border-radius: 10px 10px 0 0;
                box-shadow: 0 -3px 14px rgba(0,0,0,0.22);
        }
        #siyr-modal .siyr-scale-toast__close {
                width: 44px;
                height: 44px;
                font-size: 22px;
                right: 8px;
        }
        .siyr-offscale-bar {
                bottom: 66px;
                border-radius: 10px 10px 0 0;
                box-shadow: 0 -3px 14px rgba(0,0,0,0.22);
        }
}

/* ── Calibration input validation ────────────────────────────────────── */
#siyr-modal .siyr-cal-input--error {
        border-color: #e53e3e !important;
        box-shadow: 0 0 0 2px rgba(229,62,62,0.25) !important;
        background: #fff5f5 !important;
}
@keyframes siyr-cal-shake {
        0%,100% { transform: translateX(0); }
        20%      { transform: translateX(-6px); }
        40%      { transform: translateX(6px); }
        60%      { transform: translateX(-4px); }
        80%      { transform: translateX(4px); }
}
#siyr-modal .siyr-cal-bubble--shake {
        animation: siyr-cal-shake 0.38s ease;
}

/* ── Scale-confirm spring pop — plays on painting-wrap when painting is
   snapped or calibrated to true scale. ──────────────────────────────── */
@keyframes siyr-scale-confirm {
        0%   { transform: scale(1); }
        30%  { transform: scale(1.07); }
        60%  { transform: scale(0.96); }
        80%  { transform: scale(1.03); }
        100% { transform: scale(1); }
}
#siyr-modal .siyr-painting-wrap.siyr-scale-confirm {
        animation: siyr-scale-confirm 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* ── Inquiry panel ─────────────────────────────────────────────────────── */
#siyr-modal .siyr-inquiry-panel {
        position: absolute;
        bottom: 0; left: 0; right: 0;
        z-index: 15;
        background: #1c1c1e;
        color: #fff;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
        max-height: 85%;
        overflow-y: auto;
        overscroll-behavior: contain;
        box-sizing: border-box;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
}
#siyr-modal.siyr-inquiry-open .siyr-inquiry-panel {
        transform: translateY(0);
}
#siyr-modal.siyr-inquiry-open .siyr-toolbar {
        display: none !important;
}
#siyr-modal .siyr-inquiry-panel__head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 16px 10px;
        box-sizing: border-box;
}
#siyr-modal .siyr-inq-thumb {
        width: 48px;
        height: 48px;
        object-fit: cover;
        border-radius: 6px;
        flex-shrink: 0;
        background: rgba(255,255,255,0.08);
}
#siyr-modal .siyr-inq-title-wrap {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
}
#siyr-modal .siyr-inq-label {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.55);
        line-height: 1;
}
#siyr-modal .siyr-inq-title {
        font-size: 14px;
        font-weight: 600;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
}
#siyr-modal .siyr-inq-close {
        background: rgba(255,255,255,0.1);
        border: none;
        color: rgba(255,255,255,0.7);
        width: 30px;
        height: 30px;
        border-radius: 50%;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        padding: 0;
        font-family: inherit;
}
#siyr-modal .siyr-inq-close:hover {
        background: rgba(255,255,255,0.18);
        color: #fff;
}
#siyr-modal .siyr-inquiry-form {
        padding: 0 16px 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        box-sizing: border-box;
}
#siyr-modal .siyr-inquiry-form > input,
#siyr-modal .siyr-inquiry-form > textarea {
        background: rgba(255,255,255,0.1);
        border: none;
        border-radius: 10px;
        color: #fff;
        font-size: 15px;
        font-family: inherit;
        padding: 12px 14px;
        width: 100%;
        box-sizing: border-box;
        outline: none;
}
#siyr-modal .siyr-inquiry-form > input::placeholder,
#siyr-modal .siyr-inquiry-form > textarea::placeholder {
        color: rgba(255,255,255,0.38);
}
#siyr-modal .siyr-inquiry-form > input:focus,
#siyr-modal .siyr-inquiry-form > textarea:focus {
        background: rgba(255,255,255,0.16);
}
#siyr-modal .siyr-inquiry-form > textarea {
        resize: none;
        min-height: 80px;
        line-height: 1.5;
}
#siyr-modal .siyr-inq-render-label {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 14px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
        user-select: none;
        padding: 11px 14px;
        line-height: 1.3;
        background: rgba(52,199,89,0.14);
        border: 1.5px solid rgba(52,199,89,0.35);
        border-radius: 10px;
}
#siyr-modal .siyr-inq-render-label input[type="checkbox"] {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        cursor: pointer;
        accent-color: #34c759;
        margin: 0;
}
#siyr-modal .siyr-inq-actions {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-top: 2px;
}
#siyr-modal .siyr-inq-submit-btn {
        background: #fff;
        color: #1c1c1e;
        border: none;
        border-radius: 8px;
        padding: 12px 24px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
        transition: background 0.15s ease, opacity 0.15s ease;
        text-shadow: none;
}
#siyr-modal .siyr-inq-submit-btn:hover:not(:disabled) {
        background: #ebebeb;
}
#siyr-modal .siyr-inq-submit-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
}
#siyr-modal .siyr-inq-cancel-btn {
        background: none;
        border: none;
        color: rgba(255,255,255,0.5);
        font-size: 13px;
        cursor: pointer;
        font-family: inherit;
        padding: 0;
}
#siyr-modal .siyr-inq-cancel-btn:hover {
        color: rgba(255,255,255,0.8);
}
#siyr-modal .siyr-inq-error {
        font-size: 13px;
        color: #fc8181;
        margin: 0;
}
#siyr-modal .siyr-inquiry-success {
        padding: 36px 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        text-align: center;
}
#siyr-modal .siyr-inquiry-success[hidden] {
        display: none;
}
#siyr-modal .siyr-inquiry-success svg {
        width: 42px;
        height: 42px;
        color: #34c759;
        stroke: currentColor;
}
#siyr-modal .siyr-inquiry-success p {
        font-size: 15px;
        color: rgba(255,255,255,0.85);
        line-height: 1.6;
        margin: 0;
}
/* ── Inquire row — full-width CTA inside toolbar ──────────────────────── */
#siyr-modal .siyr-inquire-row {
        display: flex;
}
#siyr-modal .siyr-inquire-row[hidden] {
        display: none !important;
}

/* Ensure hidden attribute wins over !important display rules on the inquiry form */
#siyr-modal .siyr-inquiry-form[hidden] { display: none !important; }

#siyr-modal .siyr-btn--inquire {
        background: #34c759;
        color: #fff;
        border: none;
        border-radius: 10px;
        padding: 14px 14px;
        font-size: 14px;
        font-weight: 700;
        width: 100%;
        font-family: inherit;
        cursor: pointer;
        letter-spacing: 0.02em;
        white-space: nowrap;
        transition: background 0.15s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
}
#siyr-modal .siyr-btn--inquire:hover {
        background: #28b84e;
}
@keyframes siyr-spin { to { transform: rotate(360deg); } }
#siyr-modal .siyr-inq-submit-btn.siyr-btn--working {
        position: relative;
        padding-right: 40px !important;
}
#siyr-modal .siyr-inq-submit-btn.siyr-btn--working::after {
        content: '';
        position: absolute;
        right: 14px;
        top: 50%;
        margin-top: -7px;
        width: 14px;
        height: 14px;
        border: 2px solid rgba(28,28,30,0.2);
        border-top-color: #1c1c1e;
        border-radius: 50%;
        animation: siyr-spin 0.7s linear infinite;
}
@media (max-width: 600px), (hover: none) and (pointer: coarse) {
        #siyr-modal .siyr-btn--inquire {
                font-size: 12px;
                padding: 13px 8px;
        }
        #siyr-modal .siyr-inq-field input,
        #siyr-modal .siyr-inq-field textarea {
                font-size: 16px !important;
        }
        #siyr-modal .siyr-inq-actions {
                flex-direction: column;
                align-items: stretch;
        }
        #siyr-modal .siyr-inq-cancel-btn {
                text-align: center;
        }
}