:root {
  --bg: #222222;
  --panel: #222222;
  --panel2: #000000;
  --accent: #78824b;
  --accent-strong: #c9a554;
  --accent-warm: #bb7744;
  --danger: #685742;
  --warning: #b36d43;
  --text: #c2c2b0;
  --text-strong: #d7c483;
  --muted: #666666;
  --border: rgba(194,194,176,.18);
  --selection: #c9a554;
  --selection-soft: rgba(201,165,84,.16);
  --selection-faint: rgba(201,165,84,.65);
  --selection-handle: #d7c483;
  --selection-handle-stroke: #c9a554;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg); color: var(--text);
  overflow: hidden;
}
#app { display: flex; flex-direction: column; height: 100%; }

header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
header .brand { font-weight: 700; margin-right: 8px; letter-spacing: .5px; }
header .brand span { color: var(--accent); }
.spacer { flex: 1; }

button, .btn {
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 12px; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .12s, border-color .12s;
  user-select: none;
}
button:hover, .btn:hover { background: rgba(194,194,176,.08); border-color: var(--accent-strong); }
button:active { transform: translateY(1px); }
button.primary { background: var(--accent); border-color: var(--accent); color: #000; }
button.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
button:disabled { opacity: .4; cursor: not-allowed; }
button.danger:hover { border-color: var(--danger); color: var(--accent-warm); }

#stageWrap {
  flex: 1; position: relative; overflow: hidden;
  background:
    linear-gradient(45deg, rgba(0,0,0,.2) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0,0,0,.2) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(0,0,0,.2) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(0,0,0,.2) 75%);
  background-color: var(--bg);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0px;
}
#stage { position: absolute; inset: 0; }
/* Loading shimmer painted over the layer being processed. Both animations use
   only transform/opacity and force their own compositor layer (will-change), so
   they keep running off the main thread while model inference blocks JS — a
   canvas spinner can't, since drawing needs the (blocked) main thread. The
   opacity pulse is the guaranteed-visible motion (opacity always composites and
   ignores the parent's clip); the sweep is the shimmer sheen on top. */
#shimmer {
  position: absolute; z-index: 15; pointer-events: none;
  transform-origin: center center; overflow: hidden;
  border-radius: 4px; outline: 1px solid var(--selection-faint);
  background: var(--selection-soft);
  will-change: opacity;
  animation: shimmerPulse 1s ease-in-out infinite alternate;
}
#shimmer[hidden] { display: none; }
.shimmerSweep {
  position: absolute; top: 0; bottom: 0; left: -20%; width: 50%;
  will-change: transform;
  background: linear-gradient(100deg,
    transparent 0%, rgba(215,196,131,.0) 20%,
    rgba(215,196,131,.85) 50%, rgba(215,196,131,.0) 80%, transparent 100%);
  animation: shimmerSweep 1.1s linear infinite;
}
@keyframes shimmerPulse {
  from { opacity: .35; }
  to   { opacity: .9; }
}
@keyframes shimmerSweep {
  from { transform: translateX(-60%); }
  to   { transform: translateX(280%); }
}
#hint {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--muted); text-align: center; pointer-events: none;
  font-size: 15px; line-height: 1.7;
}
#hint kbd {
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 6px; font-size: 12px;
}

footer {
  padding: 6px 12px; background: var(--panel);
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted);
  display: flex; gap: 16px; align-items: center;
}
.sep { width: 1px; height: 22px; background: var(--border); margin: 0 2px; }

/* contextual text toolbar */
#textBar {
  display: none; align-items: center; gap: 8px;
  padding: 6px 12px; background: var(--panel2);
  border-bottom: 1px solid var(--border);
}
#textBar.show { display: flex; }
#textBar #textValue {
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text); border-radius: 6px; padding: 6px 10px;
  font-size: 13px; min-width: 220px; max-width: 280px;
  resize: vertical; line-height: 1.35; font-family: inherit;
}
#textBar input[type=color] {
  width: 32px; height: 32px; padding: 0; border-radius: 6px;
  border: 1px solid var(--border); background: none; cursor: pointer;
}
#textBar select, #textBar input[type=range] { cursor: pointer; }
#textBar select {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: 6px;
}
label.tiny { font-size: 12px; color: var(--muted); }
#textStrokeOpts { display: inline-flex; align-items: center; gap: 8px; }
#textStrokeOpts[hidden] { display: none; }

/* ---- Floating UI ---- */
.linkBars {
  position: absolute; top: 16px; left: 16px; z-index: 20;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.socialBar {
  display: flex; align-items: center; gap: 0;
}
/* collapsible group of social links — hidden until the info button toggles it */
.socialLinks {
  display: flex; align-items: center; gap: 8px;
  overflow: hidden;
  max-width: 0; margin-left: 0; opacity: 0;
  pointer-events: none;
  transition: max-width .28s ease, margin-left .28s ease, opacity .2s ease;
}
.socialBar.open .socialLinks {
  max-width: 320px; margin-left: 8px; opacity: 1;
  pointer-events: auto;
}
.socialBar.open #socialToggle { border-color: var(--accent-strong); color: var(--text-strong); }
.textLinksBar {
  display: flex; flex-direction: column; align-items: flex-start;
}
.textLinks {
  display: flex; flex-direction: column; gap: 8px;
  overflow: hidden;
  max-height: 0; margin-top: 0; opacity: 0;
  pointer-events: none;
  transition: max-height .28s ease, margin-top .28s ease, opacity .2s ease;
}
.textLinksBar.open .textLinks {
  max-height: 200px; margin-top: 8px; opacity: 1;
  pointer-events: auto;
}
.textLinksBar.open #textLinksToggle { border-color: var(--accent-strong); color: var(--text-strong); }
.floatStack { position: absolute; display: flex; flex-direction: column; gap: 12px; z-index: 20; }
#topRight { top: 16px; right: 16px; }
/* action stack lives on the right, below the import/text buttons */
#bottomRight { top: 128px; right: 16px; align-items: center; }

.fbtn {
  position: relative;
  width: 44px; height: 44px; padding: 0;
  border-radius: 12px; background: rgba(0,0,0,.78);
  border: 1px solid var(--border); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.38); cursor: pointer;
  transition: background .12s, transform .08s, border-color .12s;
}
.fbtn:hover { background: rgba(120,130,75,.22); border-color: var(--accent-strong); color: var(--text-strong); }
.fbtn:active { transform: translateY(1px); }
.fbtn:disabled { opacity: .35; cursor: not-allowed; }
.fbtn:disabled:hover { background: rgba(0,0,0,.78); border-color: var(--border); }
.fbtn svg { width: 21px; height: 21px; }
.fbtn.small { width: 34px; height: 34px; border-radius: 10px; }
.fbtn.small svg { width: 16px; height: 16px; }
.socialBtn {
  width: 38px; height: 38px; border-radius: 10px;
}
.socialBtn svg { width: 19px; height: 19px; }
.fbtn.textLinkBtn {
  width: max-content; min-width: 38px; height: 38px; padding: 0 12px;
  font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap;
}

#elementBar {
  position: absolute; display: none; align-items: center; justify-content: center; gap: 4px;
  flex-wrap: wrap; max-width: calc(100% - 16px);
  padding: 7px; background: rgba(0,0,0,.84);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45); z-index: 30;
}
.ebtn {
  position: relative;
  width: 32px; height: 32px; padding: 0; border-radius: 8px;
  background: transparent; border: none; color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .12s;
}
.keytag {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-weight: 700; line-height: 1;
  padding: 2px 4px; border-radius: 4px; white-space: nowrap;
  background: #000000; color: var(--muted);
  border: 1px solid var(--border); pointer-events: none;
}
.fbtn.active .keytag { background: var(--accent-strong); color: #000; border-color: var(--accent-strong); }
.ebtn:hover { background: rgba(201,165,84,.14); color: var(--text-strong); }
.ebtn.active { background: var(--accent); color: #000; }
.ebtn.danger:hover { background: rgba(104,87,66,.35); color: var(--accent-warm); }
.ebtn svg { width: 17px; height: 17px; }
.ebsep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; }

/* override earlier header-style textBar -> floating panel */
#textBar {
  position: absolute; display: none; z-index: 30;
  max-width: calc(100% - 16px); flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}

#removeBgBar, #eraserBar {
  position: absolute; display: none; align-items: center; gap: 10px;
  z-index: 30;
  padding: 8px 14px; background: rgba(0,0,0,.84);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
#removeBgBar { max-width: calc(100% - 16px); }
#removeBgBar.show { display: flex; }
#removeBgBar svg { width: 16px; height: 16px; flex: 0 0 auto; }
#removeBgBar .bgCtl { display: inline-flex; align-items: center; gap: 10px; }
#removeBgBar .bgCtl[hidden] { display: none; }
.modeToggle {
  padding: 4px 10px; font-size: 12px; border-radius: 8px;
  min-width: 64px; justify-content: center;
}
.modeToggle:disabled { cursor: not-allowed; opacity: .45; }
#removeBgStrength, #removeBgDepth {
  width: min(150px, 42vw);
  accent-color: var(--accent-strong);
  cursor: pointer;
}
#removeBgStrength:disabled, #removeBgDepth:disabled { cursor: not-allowed; opacity: .45; }
#eraserBar { max-width: calc(100% - 16px); }
#eraserBar.show { display: flex; }
#eraserBar .eraserCtl { display: inline-flex; align-items: center; gap: 10px; }
#eraseSize {
  width: min(150px, 42vw);
  accent-color: var(--accent-strong);
  cursor: pointer;
}

@media (max-width: 640px) {
  #eraserBar { flex-wrap: wrap; justify-content: center; }
  #eraserBar .eraserCtl {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    flex: 1 1 140px;
    min-width: 0;
  }
  #eraseSize { width: 100%; }
  #eraseHint { text-align: center; line-height: 1.3; }
}

#status {
  position: absolute; left: 16px; bottom: 16px; z-index: 10;
  background: rgba(0,0,0,.72); color: var(--text-strong);
  padding: 6px 12px; border-radius: 8px; font-size: 12px;
  pointer-events: none;
}