#controls {
  position:fixed; bottom:18%; left:0; right:0; width:fit-content; z-index:100;
  background:#fff; padding:8px 0px 8px 20px; border-bottom:0px solid #ccc;box-shadow: 0 10px 30px #00000010;
  display:flex; flex-direction:row; align-items:center; gap:12px; border-radius: 100px;margin: 0 auto;
}
#pattern-area {
  width:100vw; height:100vh; position:fixed; top:0px; left:0; overflow:hidden; z-index:1;
  background:#eaf0f6; min-height:200px;
  display:flex;align-items:center;justify-content:center;
}
.pattern-grid { display:grid; position:absolute; pointer-events:auto; user-select:none; }
.tile {
  outline:0.5px solid #80808060; background:#fff;
  position:relative; overflow:hidden; pointer-events:none; z-index:1; }
.work {outline:1px dashed #80808080; z-index:5; }
img, .svgimg { position:absolute;  }
.pattern-elem.selected { box-shadow:0 0 0 2px #4bee98;}
#thumbs {display:flex;flex-direction:row;gap:7px;flex-wrap:nowrap;align-items:center;overflow-x:auto;max-width:48vw;}
#thumbs span {position:relative;}
#thumbs img.thumb {width:45px;height:auto;margin:0 2px 0 0;cursor:pointer; border:2px solid #cccccc; border-radius:6px; transition:.11s;}
#thumbs img.thumb.sel {border-color:#4bee98;}
.delbtn {
  position:absolute; right:0; top:0;
  width:14px;height:14px; background:#fee; color:#b22;
  border:1px solid #c44; border-radius:5px;
  font-size:11px; cursor:pointer; z-index:211;
  display:flex;align-items:center;justify-content:center;
}
#hint { color:#888; font-size:.94em;}
#dropzone {position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(223,255,235,0.88); color:#10a869;font-size:1.25em;text-align:center;
  display:none;align-items:center;justify-content:center;z-index:200;pointer-events:none;}
#slider-area {display:flex;align-items:center;gap:10px;}
#tileSizeSlider { width:100px; }
#export-bar {display:flex;align-items:center;gap:10px;}
.chip {padding:4px 12px;border-radius:20px;font-size:.97em;border:1.2px solid #aaa;cursor:pointer;outline:none;
  background:#fff; transition:.13s;}
.chip.sel {border-color:#2196f3; color:#1976d2;background:#e9f4ff;}
.chip:disabled,.chip[disabled]{opacity:.55;color:#888;border-style:dashed;cursor:not-allowed;background:#f6f6f6;}
#downloadBtn {font-family: montserrat-bold; padding:8px 19px 9px;font-weight:500;font-size:1em;border-radius:20px;border:0px solid #97c6f4; background:#5800ff;cursor:pointer; color: #ffffff;}
#downloadBtn[disabled]{opacity:.44;cursor:not-allowed;}
#float-control {
  position:fixed;z-index:999;min-width:260px;min-height:50px;background:#fff;border-radius:20px;
  box-shadow:0 5px 28px #00000030;text-align: left;width: 260px;
  display:none;flex-direction:column;gap:5px;padding:0 30px 6px 30px;transition:box-shadow .13s;}
#float-control .ctrl-title {cursor:move; padding: 20px 0; margin: -12px 0 0 0;}
#float-control label {font-size:1em;}
#float-control .row {margin-bottom:10px;display:flex;align-items:center;gap:0px;flex-wrap:wrap;}
#float-control input[type='range'] {width:110px; background: #efefef;border-radius: 100px;height: 8px;}
#controls input[type='range'] {width:200px; background: #efefef;border-radius: 100px;height: 8px;}
#float-control .colorpick, #controls .colorpick {width:27px;height:27px;border-radius: 4px;border:1.1px solid #aaa;vertical-align:middle;cursor:pointer;}
#float-control .color-label {font-size:.95em;margin-right:9px;}
#float-control .layerbtn {margin:0 3px 0 2px;padding:2px 7px;font-size:15px;cursor:pointer;border-radius:3px;border:1.1px solid #bbb;}
#float-control .closebtn {position:absolute;right:16px;top:16px;font-size:24px;cursor:pointer;background:none;border:none;}
label {display: contents;}
#blank-invite {
  position:fixed;z-index:9999;inset:0;align-items:center;justify-content:center;
  font-size:1em;color:#8c8c8c73;letter-spacing:0.01em;font-weight:500;
  display:none;background:none;text-align:center; 
  user-select:none;
}
#toasts {
  position:fixed;bottom:34%;z-index:5000;display:flex;flex-direction:column;gap:10px;align-items:flex-end;left: 50%;
  transform: translateX(-50%) translateY(16px);
}
#emoji-dialog {display:none;position:fixed;bottom: 20%;left: 50%;z-index:999;background:white;border-radius:18px;box-shadow:0 6px 40px #8884;max-width:300px;padding:20px;}
#emoji-menu-btn {font-size:126%;padding:4px 7px 3px;border-radius:50%;background:#fff;border:1.3px solid #ccc;cursor:pointer;}

#pattern-area, #pattern-grid, .tile, .pattern-elem {
  touch-action: none !important;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
.pattern-elem {
  pointer-events: auto !important;
  touch-action: none !important;
}
.pattern-elem.selected {
  box-shadow: 0 0 0 2px #4bee98;
  /* Временно или всегда — толстый невидимый слой, который ловит drag */
  outline: none;
}

.pattern-elem.dragzone {
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0);
  z-index: 10;
  /* pointer-events: auto по-умолчанию */
}


@media (max-width: 640px) {
  #controls {
  position:fixed; bottom:20%; left:0; right:0; width:fit-content; z-index:100; 
  background:#fff; padding:8px 0px 8px 20px; border-bottom:0px solid #ccc;box-shadow: 0 10px 30px #00000010;
  display:flex; flex-direction:row; align-items:center; gap:4px; border-radius: 100px;margin: 0 auto;
}
    #emoji-menu-btn {font-size:126%;padding:5px 6px 6px;border-radius:50%;background:#fff;border:1.3px solid #ccc;cursor:pointer;}
    .mob-none {display: none;}
    #controls input[type='range'] {width:80px; background: #efefef;border-radius: 100px;height: 8px;}
    #emoji-dialog {display:none;position:fixed;bottom: 20%;left: 12px; right: 12px;z-index:999;background:white;border-radius:18px;box-shadow:0 6px 40px #8884;width:fit-content;padding:20px;}
}