/* =============================================================================
 * Extractly — Stylesheet
 * Desktop: horizontal toolbar, full-height canvas, right-click pan.
 * Mobile:  compact header, collapsible instruction area, floating canvas
 *          controls (zoom +/-, pan mode toggle).
 * ============================================================================= */


/* -------------------------------------------------------------------------- */
/* THEME                                                                       */
/* -------------------------------------------------------------------------- */

:root {
    --bg:           #0d0d0d;
    --panel:        #161616;
    --panel-mid:    #1a1a1a;
    --accent-blue:  #3466c1;
    --accent-cyan:  #47b8e5;
    --text:         #ffffff;
    --text-muted:   #888888;
    --border:       #2a2a2a;
    --btn-grad:     linear-gradient(135deg, #3466c1 0%, #47b8e5 100%);
    --radius:       6px;

    /* Scroll buffer around the canvas — also used in fileInput handler in JS. */
    --canvas-pad:   500px;
}


/* -------------------------------------------------------------------------- */
/* RESET                                                                       */
/* -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Segoe UI', Roboto, Helvetica, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    display: flex;
    flex-direction: column;

    /* dvh handles iOS Safari address-bar resize; vh is the fallback. */
    height: 100dvh;
    height: 100vh;

    overflow: hidden; /* Only the canvas viewport scrolls, not the page. */
}


/* -------------------------------------------------------------------------- */
/* WIZARD HEADER                                                               */
/* -------------------------------------------------------------------------- */

.wizard-header {
    background: var(--panel);
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    z-index: 200;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.brand-container {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0; /* Allow text to shrink/truncate */
}

.logo-icon {
    height: 64px;
    width:  64px;
    object-fit: contain;
    flex-shrink: 0;
}

.logo-wordmark {
    height: 64px;
    width:  auto;
    object-fit: contain;
    opacity: 0.9;
    flex-shrink: 0;
}

.brand-divider {
    width: 1px;
    height: 22px;
    background: var(--border);
    flex-shrink: 0;
}

.step-indicator {
    font-weight: 700;
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 12px;
    border-left: 2px solid var(--accent-blue);
    padding-left: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.nav-btns {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    margin-left: 12px;
}


/* -------------------------------------------------------------------------- */
/* INSTRUCTION BAR                                                             */
/* -------------------------------------------------------------------------- */

.instruction-bar {
    background: var(--panel-mid);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 100;
    /*
     * No overflow: hidden here — the child toolbar-row needs overflow-x: auto.
     * A parent overflow: hidden would silently override it and clip the toolbar.
     */
}

/* Toggle button — desktop: always visible as a plain label row.
   On mobile it becomes a tappable chevron button. */
.btn-toggle-bar {
    display: none; /* Hidden on desktop; shown at mobile breakpoint below */
}

/* The collapsible zone: instruction text + step-specific context rows */
.bar-collapsible {
    padding: 10px 20px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.instruction-text {
    font-size: 13px;
    color: #bbb;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 4px;
    line-height: 1.6;
}

.instruction-text b { color: var(--accent-cyan); }

.palette-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/*
 * Always-visible toolbar row.
 * Uses horizontal scroll (nowrap) instead of wrap — wrapping was the original
 * cause of buttons being pushed off-screen and clipped by body { overflow: hidden }.
 */
.toolbar-row {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 20px;
}

.toolbar-row::-webkit-scrollbar { display: none; }

/* Fade edges to hint that the toolbar is scrollable */
.instruction-bar::after {
    content: '';
    position: absolute;
    right: 0;
    top: auto;
    width: 32px;
    height: 52px;       /* Approximate toolbar height */
    background: linear-gradient(to right, transparent, var(--panel-mid));
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s;
}

/* .tool-group and friends */
.tool-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}

.input-pair {
    display: flex;
    gap: 3px;
    align-items: center;
}

.flood-toggle-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}


/* -------------------------------------------------------------------------- */
/* CANVAS VIEWPORT                                                             */
/* -------------------------------------------------------------------------- */

/*
 * Plain scroll container — no flex, no padding here.
 * Padding lives in .viewport-content to avoid the flex+overflow end-padding
 * clipping bug (which was causing the canvas to appear flush-right).
 */
.viewport {
    flex: 1;
    overflow: auto;
    background: #050505;
    position: relative;
    touch-action: none; /* Stop iOS Safari intercepting pinch/swipe gestures */
}

/*
 * Inner layout container.
 * min-width/height: max-content forces full expansion so the 500px padding
 * on all four sides is included in the scroll area — not clipped.
 */
.viewport-content {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--canvas-pad);
    min-width:  max-content;
    min-height: max-content;
    box-sizing:  content-box;
}

.canvas-wrapper {
    position: relative;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.9);
    background: repeating-conic-gradient(#111 0% 25%, #181818 0% 50%) 50% / 20px 20px;
    border: 1px solid #2a2a2a;
    flex-shrink: 0;
}

canvas#mainCanvas   { display: block; }

canvas#overlayCanvas {
    position: absolute;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 5;
}


/* -------------------------------------------------------------------------- */
/* FLOATING CANVAS CONTROLS                                                    */
/* -------------------------------------------------------------------------- */

/*
 * Zoom +/- and pan mode toggle, overlaid in the bottom-right of the viewport.
 *
 * Pan mode toggle — replaces the right-click gesture on touch devices:
 *   OFF (default): one finger = step action (draw box, pick colour, etc.)
 *   ON:            one finger = pan the canvas freely
 *
 * This lets users move the image without needing awkward two-finger drag while
 * also trying to draw or pick a colour on a small screen.
 */
.floating-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 50;
    pointer-events: all;
}

.float-btn {
    width:  44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(22, 22, 22, 0.92);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    /* Override base button styles */
    text-transform: none;
    padding: 0;
    border-radius: 50%;
    white-space: nowrap;
    flex-shrink: 0;
}

.float-btn:hover:not(:disabled) {
    background: rgba(52, 102, 193, 0.9);
    border-color: var(--accent-cyan);
    transform: none; /* Override base translateY hover */
    filter: none;
}

/* Active / engaged state for pan toggle */
.float-btn.float-pan.pan-active {
    background: var(--btn-grad);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(71, 184, 229, 0.35), 0 2px 12px rgba(0, 0, 0, 0.6);
    color: #fff;
}

.float-divider {
    width: 1px;
    height: 10px;
    background: var(--border);
}


/* -------------------------------------------------------------------------- */
/* BUTTONS (global)                                                            */
/* -------------------------------------------------------------------------- */

button {
    cursor: pointer;
    padding: 9px 18px;
    border: none;
    border-radius: var(--radius);
    background: var(--btn-grad);
    color: white;
    font-weight: 700;
    font-family: inherit;
    transition: filter 0.15s, transform 0.15s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    text-transform: uppercase;
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
}

button:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }

button:disabled {
    background: #2e2e2e !important;
    color: #555;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    border: 1px solid #3a3a3a;
    filter: none;
}

.btn-back     { background: transparent; border: 1px solid #444; color: #999; }
.btn-confirm  { background: var(--btn-grad); padding: 7px 14px; font-size: 12px; }
.btn-download { background: var(--btn-grad); border: 1px solid rgba(255,255,255,0.3); }
.btn-undo     { background: #333; border: 1px solid #444; font-size: 11px; padding: 7px 12px; color: #ccc; }


/* -------------------------------------------------------------------------- */
/* FORM CONTROLS                                                               */
/* -------------------------------------------------------------------------- */

label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

input[type="range"] {
    accent-color: var(--accent-cyan);
    width: 110px;
    cursor: pointer;
}

input[type="range"]#tolerance { width: 220px; }

input[type="color"] {
    background: #2a2a2a;
    border: 1px solid #444;
    height: 32px;
    width:  58px;
    cursor: pointer;
    border-radius: 4px;
}

input[type="number"],
select {
    background: #1e1e1e;
    border: 1px solid #3a3a3a;
    color: var(--text);
    padding: 6px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
    width: 62px;
}

select { width: auto; min-width: 100px; }

.swatch {
    width:  22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.7);
    display: inline-block;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
}

.hidden { display: none !important; }


/* -------------------------------------------------------------------------- */
/* RESPONSIVE — TABLET (max-width: 900px)                                     */
/* -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .logo-icon     { height: 48px; width: 48px; }
    .logo-wordmark { height: 48px; }
}


/* -------------------------------------------------------------------------- */
/* RESPONSIVE — MOBILE (max-width: 640px)                                     */
/* -------------------------------------------------------------------------- */

@media (max-width: 640px) {

    /* ── Header ── */
    .wizard-header { padding: 6px 12px; }
    .logo-icon     { height: 36px; width: 36px; }
    .logo-wordmark { display: none; } /* Icon alone is enough at this width */
    .brand-divider { display: none; }

    .step-indicator {
        font-size: 10px;
        letter-spacing: 0.6px;
        padding-left: 10px;
        max-width: 150px;
    }

    button { padding: 9px 14px; font-size: 10px; }
    .btn-confirm { padding: 8px 12px; font-size: 11px; }
    .nav-btns { gap: 6px; margin-left: 8px; }

    /* ── Instruction bar ── */
    .instruction-bar { position: relative; }

    /*
     * On mobile the collapsible zone is hidden by default.
     * The toggle button reveals it. This keeps the header chrome minimal so
     * the canvas gets maximum vertical space.
     */
    .bar-collapsible {
        display: none;
        padding: 8px 12px 4px;
        border-bottom: 1px solid var(--border);
        animation: slideDown 0.15s ease;
        max-height: 38vh;   /* Cap at ~38% of screen height */
        overflow-y: auto;   /* Scroll rather than pushing toolbar off-screen */
    }

    .instruction-bar.bar-open .bar-collapsible {
        display: flex;
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0);    }
    }

    /* Show the toggle button on mobile */
    .btn-toggle-bar {
        display: flex;
        align-items: center;
        gap: 6px;
        background: transparent;
        border: none;
        border-bottom: 1px solid var(--border);
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 7px 12px;
        cursor: pointer;
        width: 100%;
        box-shadow: none;
        border-radius: 0;
        transform: none !important;
        filter: none !important;
    }

    .btn-toggle-bar:hover { color: var(--accent-cyan); }

    .toggle-icon {
        font-size: 12px;
        transition: transform 0.2s;
        display: inline-block;
    }

    .instruction-bar.bar-open .toggle-icon {
        transform: rotate(180deg);
    }

    /* Tighten toolbar on mobile */
    .toolbar-row { padding: 8px 12px; gap: 14px; }

    input[type="range"]          { width: 90px; }
    input[type="range"]#tolerance { width: 140px; }

    input[type="number"],
    select { width: 54px; font-size: 11px; }

    select { width: auto; min-width: 80px; }

    /* ── Floating controls — more prominent on touch ── */
    .float-btn {
        width:  48px;
        height: 48px;
        font-size: 22px;
    }

    .floating-controls {
        bottom: 16px;
        right:  16px;
        gap: 8px;
    }
}


/* -------------------------------------------------------------------------- */
/* RESPONSIVE — VERY SMALL (max-width: 380px)                                 */
/* -------------------------------------------------------------------------- */

@media (max-width: 380px) {
    .step-indicator { display: none; } /* Extremely tight — step shown in toolbar */
    input[type="range"]#tolerance { width: 110px; }
    input[type="range"]           { width: 80px;  }
}


/* -------------------------------------------------------------------------- */
/* TOUCH-DEVICE SPECIFICS                                                      */
/* Targets devices where the primary input is coarse (finger, not mouse).     */
/* -------------------------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {

    /* Larger touch targets for sliders and inputs */
    input[type="range"] { height: 28px; }

    /* Show the pan mode button — desktop users right-click to pan instead */
    .float-btn.float-pan { display: flex; }

    /* Increase tap target size for number inputs */
    input[type="number"] { min-height: 36px; }
}

/* On desktop (hover capable): hide the pan toggle — right-click pan works fine */
@media (hover: hover) and (pointer: fine) {
    .float-btn.float-pan { display: none; }
}