/* Toolbars, icon buttons, drag handles, size slider */
.tb {
  /* --tb-u: knob de redimensionamento. Toda dimensão abaixo é calc(px * var(--tb-u)),
     então arrastar o cantinho rosa escala a barra inteira, uniforme e nítida. */
  --tb-u: 1;
  position: absolute;
  background: var(--bar);
  border: 1px solid var(--bar-line);
  border-radius: 999px;
  display: flex;
  align-items: center;
  padding: calc(5px * var(--tb-u));
  gap: calc(2px * var(--tb-u));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  z-index: 30;
  touch-action: none;
}
.tb.vertical { flex-direction: column; }

.drag-handle {
  width: calc(14px * var(--tb-u)); height: calc(36px * var(--tb-u));
  display: flex; align-items: center; justify-content: center;
  cursor: grab;
  color: var(--ink-dim);
  font-size: calc(9px * var(--tb-u)); letter-spacing: -1px; line-height: 1;
  flex-shrink: 0;
  border-radius: 999px;
  transition: color 0.15s;
  touch-action: none;
}
.drag-handle:active { cursor: grabbing; }
.drag-handle:hover { color: var(--ink); }
.tb.vertical .drag-handle { width: calc(36px * var(--tb-u)); height: calc(12px * var(--tb-u)); }

/* Botão girar — vira esta barra entre horizontal e vertical. É "enfeite" da
   barra (não uma ferramenta): menor, quadradinho e apagado até passar o mouse,
   pra não competir com os botões de ferramenta nem ocupar espaço de ícone. */
.tb-rotate {
  width: calc(16px * var(--tb-u)); height: calc(16px * var(--tb-u));
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; padding: 0; margin: 0 1px;
  color: var(--ink-dim); border-radius: 5px;
  cursor: pointer; flex-shrink: 0; opacity: 0.5;
  transition: color 0.12s, background 0.12s, opacity 0.12s;
}
.tb-rotate:hover { color: var(--pink); background: rgba(255,255,255,0.08); opacity: 1; }
.tb-rotate svg { width: calc(12px * var(--tb-u)); height: calc(12px * var(--tb-u)); }

/* Cantinho rosa — arrasta pra escalar a barra inteira. Fica levemente
   pra fora da pílula pra não roubar o clique do último botão. */
.tb-resize {
  position: absolute;
  right: calc(-4px * var(--tb-u)); bottom: calc(-4px * var(--tb-u));
  width: calc(16px * var(--tb-u)); height: calc(16px * var(--tb-u));
  cursor: nwse-resize; touch-action: none; z-index: 4;
}
.tb-resize::after {
  content: ''; position: absolute;
  right: calc(4px * var(--tb-u)); bottom: calc(4px * var(--tb-u));
  width: calc(7px * var(--tb-u)); height: calc(7px * var(--tb-u));
  border-right: 2px solid var(--pink); border-bottom: 2px solid var(--pink);
  border-bottom-right-radius: 3px;
  opacity: 0.55; transition: opacity 0.12s;
}
.tb:hover .tb-resize::after { opacity: 1; }

.icon-btn {
  width: calc(36px * var(--tb-u)); height: calc(36px * var(--tb-u));
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--ink-dim);
  border-radius: 50%;
  transition: all 0.12s;
  flex-shrink: 0;
  position: relative;
}
.icon-btn:hover { background: rgba(255,255,255,0.08); color: var(--ink); }
.icon-btn.active { color: var(--pink); }
.icon-btn.active::after {
  content: ''; position: absolute; bottom: calc(3px * var(--tb-u));
  width: calc(4px * var(--tb-u)); height: calc(4px * var(--tb-u));
  background: var(--pink); border-radius: 50%;
  box-shadow: 0 0 6px var(--pink-glow);
}
.icon-btn svg { width: calc(17px * var(--tb-u)); height: calc(17px * var(--tb-u)); }

/* Flyout hint: subtle triangle in the bottom-right corner of the selection
   button, signalling there are more tools behind it (Photoshop-style). */
#btn-select::before {
  content: '';
  position: absolute;
  right: 3px; bottom: 3px;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-bottom: 4px solid currentColor;
  opacity: 0.55;
  pointer-events: none;
}

/* Small icon button — used for eyedropper in the size toolbar */
.icon-btn-sm { width: calc(28px * var(--tb-u)); height: calc(28px * var(--tb-u)); }
.icon-btn-sm svg { width: calc(14px * var(--tb-u)); height: calc(14px * var(--tb-u)); }
.icon-btn#btn-eyedropper.active {
  background: rgba(74, 222, 128, 0.18);
  color: #4ade80;
}

.color-btn {
  width: calc(36px * var(--tb-u)); height: calc(36px * var(--tb-u));
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; background: transparent; border: none;
  border-radius: 50%;
  transition: background 0.12s;
  flex-shrink: 0;
  position: relative;
}
/* Two stacked swatches — primary (FG) on top, secondary (BG) peeking from
   behind & to the right. X swaps them. Mirrors the classic FG/BG metaphor
   from desktop paint apps. */
#color-dot {
  position: relative;
  width: calc(18px * var(--tb-u)); height: calc(18px * var(--tb-u));
  border-radius: 50%;
  background: #000;
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  z-index: 2;
}
#color-dot-bg {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-15%, -15%);
  width: calc(14px * var(--tb-u)); height: calc(14px * var(--tb-u));
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid rgba(255,255,255,0.3);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
  z-index: 1;
}

/* ─── Size slider — a geometria segue a orientação do tb-size ─── */
#tb-size.vertical { width: calc(36px * var(--tb-u)); padding: calc(10px * var(--tb-u)) calc(5px * var(--tb-u)); }
#tb-size:not(.vertical) { padding: calc(5px * var(--tb-u)) calc(10px * var(--tb-u)); }
#size-label {
  font-size: calc(0.65rem * var(--tb-u));
  font-weight: 700;
  color: var(--ink-dim);
  text-align: center;
  line-height: 1;
  min-height: calc(10px * var(--tb-u));
}
#size-track {
  /* Área de toque larga e transparente pra facilitar a pegada; a barrinha
     visível fina é desenhada pelo ::before. */
  background: transparent;
  border-radius: 2px;
  position: relative;
  cursor: pointer;
  touch-action: none;
}
#tb-size.vertical #size-track { width: calc(24px * var(--tb-u)); height: calc(140px * var(--tb-u)); margin: calc(10px * var(--tb-u)) auto; }
#tb-size:not(.vertical) #size-track { width: calc(140px * var(--tb-u)); height: calc(24px * var(--tb-u)); margin: auto calc(10px * var(--tb-u)); }

#size-track::before {
  content: '';
  position: absolute;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  pointer-events: none;
}
#tb-size.vertical #size-track::before { left: 50%; top: 0; bottom: 0; width: calc(4px * var(--tb-u)); transform: translateX(-50%); }
#tb-size:not(.vertical) #size-track::before { top: 50%; left: 0; right: 0; height: calc(4px * var(--tb-u)); transform: translateY(-50%); }

#size-fill {
  position: absolute;
  background: var(--pink);
  border-radius: 2px;
  pointer-events: none;
}
#tb-size.vertical #size-fill { bottom: 0; left: 50%; width: calc(4px * var(--tb-u)); transform: translateX(-50%); transition: height 0.08s; }
#tb-size:not(.vertical) #size-fill { left: 0; top: 50%; height: calc(4px * var(--tb-u)); transform: translateY(-50%); transition: width 0.08s; }

#size-thumb {
  position: absolute;
  width: calc(16px * var(--tb-u)); height: calc(16px * var(--tb-u));
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  pointer-events: none;
}
#tb-size.vertical #size-thumb { left: 50%; transform: translate(-50%, 50%); transition: bottom 0.08s; }
#tb-size:not(.vertical) #size-thumb { top: 50%; transform: translate(-50%, -50%); transition: left 0.08s; }