/* ───────── GLOBAL LAYOUT (desktop) ───────── */
.kleur-space-container{display:flex;flex-wrap:wrap;align-items:flex-start}
#visualizer{flex:1 1 60%;max-width:60%;margin-right:20px}
.image-container{position:relative;width:100%}
#room{width:100%;display:block;height:auto}
.colorLayer{position:absolute;top:0;left:0;width:100%;height:100%;mix-blend-mode:multiply;pointer-events:none}

#controls{flex:1 1 35%;max-width:35%;display:flex;flex-direction:column;margin-top:20px}

/* sticky right column; only the .swatches-scroll scrolls */
@media (min-width:769px){
  #controls{position:sticky;top:10px;align-self:flex-start;max-height:calc(100vh - 20px);overflow:clip}
  #swatches{overflow:visible}

  /* desktop swatch scroller */
  #controls .swatches-scroll{
    position:relative;
    flex:1;
    min-height:120px;
    max-height:min(36vh,320px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-gutter:stable both-edges; /* reserve rail */
    border:1px solid #EDF2F7;border-radius:8px;padding:10px;margin-bottom:12px;background:#fff
  }
}

/* rail shown even before scroll (desktop) */
#controls .swatches-scroll::after{
  content:"";
  position:absolute;
  top:8px; bottom:8px; right:6px;
  width:6px; border-radius:3px;
  background:#E7EEE8;
  opacity:0; pointer-events:none;
}
#controls .swatches-scroll.has-scroll::after{opacity:1}

/* subtle shadow at top when content continues (desktop hint) */
#controls .swatches-scroll::before{content:"";display:none}
#controls .swatches-scroll.at-middle::before{
  display:block;
  position:absolute; left:0; right:0; top:0; height:14px;
  background:linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,0));
}

/* WebKit scrollbar styling (desktop & Android) */
#controls .swatches-scroll::-webkit-scrollbar{width:12px}
#controls .swatches-scroll::-webkit-scrollbar-track{background:#EEF3EE;border-radius:8px}
#controls .swatches-scroll::-webkit-scrollbar-thumb{background:#9FB0A1;border-radius:8px;border:3px solid #EEF3EE}

/* hide the original Selected Colours under the image on desktop (we render it in the right column) */
@media (min-width:769px){
  #visualizer #selected-colors{display:none !important}
}

/* Tabs (desktop) */
#tabs{display:flex;flex-wrap:wrap;margin-bottom:10px;gap:6px}
#tabs .tab{flex:1;text-align:center;padding:10px;background:#fff;border:1px solid #EDF2F7;cursor:pointer;font-size:16px;border-radius:6px}
#tabs .tab.active{background:#32657E;color:#fff;border-color:#32657E}

/* Swatches (shared) */
.swatch-category{margin-bottom:12px}
.swatches-container{display:flex;flex-wrap:wrap;gap:4px}
.swatch{width:30px;height:30px;cursor:pointer;border:1px solid #fff}
.swatch:hover,.swatch.selected{border-color:#54565a}

/* Selected Colours (right column) */
.selected-colors-aside{margin-bottom:12px}
.selected-colors-aside .selected-colors-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.selected-color{display:flex;align-items:flex-start}
.selected-color-swatch{width:30px;height:30px;margin-right:10px;border:1px solid #ccc}
.selected-color-name{font-size:14px;line-height:1.3}

/* Desktop actions row (Clear + Download side by side) */
.desktop-actions{display:flex;gap:10px;margin:10px 0 12px 0}
.desktop-actions #clear-selection-button,
.desktop-actions #download-palette-button{flex:1}

/* Buttons (shared style) */
#clear-selection-button,#download-palette-button{padding:10px 20px;background:#5D7261;color:#fff;border:none;cursor:pointer;margin-bottom:10px;border-radius:0}
#clear-selection-button:hover,#download-palette-button:hover{background:#32657E}

/* Save project (desktop) */
#save-project{margin-top:auto}
#save-project .input-container{display:flex;gap:20px;margin-bottom:10px}
#save-project input{flex:1;padding:8px;border:1px solid #e6e6e6}
#save-project button{width:100%;padding:10px 20px;background:#5D7261;color:#fff;border:none;cursor:pointer;font-size:15px;font-family:"Avenir Next",sans-serif;font-weight:600;text-transform:uppercase;border-radius:0}
#save-project button:hover{background:#32657E}

/* ───────── MOBILE (<=768px): image always visible + bottom sheet ───────── */
.open-controls-btn,.controls-sheet{display:none}

@media (max-width:768px){
  #controls,#tabs,#swatches,#selected-colors,#clear-selection-button{display:none !important}

  .kleur-space-container{flex-direction:column}
  #visualizer{flex:1 1 100%;max-width:100%;margin-bottom:10px}

  .image-container{position:sticky;top:0;background:#fff;z-index:0;width:100%;max-width:100%}
  #room{display:block;width:100%;max-width:100%;height:auto}

  .open-controls-btn{display:block;width:100%;padding:15px;background:#5D7261;color:#fff;border:none;font-size:16px;cursor:pointer;margin-bottom:10px}
  .open-controls-btn:hover{background:#32657E}

  .controls-sheet{
    display:block;position:fixed;left:0;right:0;bottom:0;
    height:clamp(40vh,52vh,60vh);
    max-height:calc(100svh - 200px);
    background:#fff;box-shadow:0 -4px 12px rgba(0,0,0,.15);
    border-top-left-radius:12px;border-top-right-radius:12px;
    transform:translateY(100%);transition:transform .28s ease;z-index:10000;overflow:hidden;
    padding-bottom:env(safe-area-inset-bottom)
  }
  .controls-sheet.open{transform:translateY(0)}

  .controls-sheet .sheet-inner{display:flex;flex-direction:column;height:100%}

  .controls-sheet .close-btn{position:absolute;top:10px;right:16px;font-size:32px;color:#637660;background:none;border:none;cursor:pointer;line-height:1;padding:0;z-index:2}

  .controls-sheet .tab-row{
    position:relative; /* for custom scrollbar placement */
    display:flex;flex-wrap:nowrap;overflow-x:auto;padding:12px 16px 16px 16px;gap:6px;border-bottom:1px solid #eee;
    min-height:48px;background:#fff;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none; /* hide native */
  }
  .controls-sheet .tab-row::-webkit-scrollbar{height:0}

  .controls-sheet .tab{flex:0 0 auto;padding:10px 14px;background:#fff;border:1px solid #EDF2F7;border-radius:6px;cursor:pointer;font-size:14px;white-space:nowrap;color:#000}
  .controls-sheet .tab.active{background:#32657E;color:#fff;border-color:#32657E}

  .controls-sheet .sheet-scroll{
    flex:1;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;
    padding:12px 16px 18px 16px
  }

  .controls-sheet .swatches-scroll-mobile{
    position:relative; /* needed for custom scrollbar */
    max-height:180px;overflow:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none; /* hide native */
    border:1px solid #EDF2F7;border-radius:8px;padding:10px;margin-bottom:12px;background:#fff
  }
  .controls-sheet .swatches-scroll-mobile::-webkit-scrollbar{width:0;height:0}

  .controls-sheet .swatch-grid{margin:0}
  .controls-sheet .swatch-category{margin-bottom:10px}
  .controls-sheet .swatches-container{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
  .controls-sheet .swatch{width:30px;height:30px;cursor:pointer;border:1px solid #fff}
  .controls-sheet .swatch:hover,.controls-sheet .swatch.selected{border-color:#54565a}

  .controls-sheet .drawer-h3{margin:6px 0 8px 0;font-size:18px}
  .controls-sheet .selected-colors-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:10px}
  .controls-sheet .selected-color{display:flex;align-items:flex-start}
  .controls-sheet .selected-color-swatch{width:30px;height:30px;margin-right:10px;border:1px solid #ccc}
  .controls-sheet .selected-color-name{font-size:13px;line-height:1.3}

  .controls-sheet .drawer-actions{display:flex;gap:10px;margin-bottom:10px}
  .controls-sheet .drawer-actions .drawer-btn{flex:1;margin:0;padding:12px;background:#5D7261;color:#fff;border:none;cursor:pointer;border-radius:0}
  .controls-sheet .drawer-actions .drawer-btn:hover{background:#32657E}
  .controls-sheet #clear-selection-button,
  .controls-sheet #download-palette-button{display:inline-block !important}

  .controls-sheet .drawer-save .input-container{display:flex;gap:10px;margin-bottom:10px}
  .controls-sheet .drawer-save input{flex:1 1 calc(50% - 5px);padding:10px;border:1px solid #e6e6e6}
  .controls-sheet .drawer-save .drawer-btn{width:100%;padding:12px;background:#5D7261;color:#fff;border:none;cursor:pointer;margin-bottom:0;border-radius:0}
  .controls-sheet .drawer-save .drawer-btn:hover{background:#32657E}

  /* ── Custom scrollbars (mobile only; always visible & draggable) ── */
  .ksv-scrollbar{
    position:absolute; z-index:5; pointer-events:auto;
    background:#E7EEE8; border-radius:3px;
  }
  .ksv-scrollbar .ksv-thumb{
    position:absolute; background:#9FB0A1; border-radius:3px; cursor:pointer;
  }
  /* vertical (swatches) */
  .ksv-scrollbar.ksv-vert{right:6px; top:8px; bottom:8px; width:6px}
  .ksv-scrollbar.ksv-vert .ksv-thumb{left:0; width:6px; min-height:28px}
  /* horizontal (tabs) – sits at the very bottom inside tab row */
  .ksv-scrollbar.ksv-horz{left:16px; right:16px; height:6px; bottom:4px}
  .ksv-scrollbar.ksv-horz .ksv-thumb{top:0; height:6px; min-width:28px}
}