/* toolbar.css */

/* ============================================================
   TOOLBAR
   ============================================================ */
.toolbar{
  display:flex;align-items:center;gap:0;padding:8px 12px;
  background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 8px 24px rgba(0,0,0,.25);
  flex-wrap:wrap;flex-shrink:0;overflow:visible;position:relative;
}
.toolbar-group{display:flex;align-items:center;gap:4px;padding:0 10px;position:relative}
.toolbar-group:first-child{padding-left:0}
.toolbar-group:last-child{padding-right:0}
.toolbar-group+.toolbar-group::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:22px;background:rgba(255,255,255,.08)}
.toolbar-spacer{flex:1}
.toolbar-sep{width:1px;height:22px;background:rgba(255,255,255,.08);flex-shrink:0;margin:0 10px;align-self:center}

.tb-btn{
  height:28px;padding:0 8px;border-radius:var(--radius-lg);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:var(--text-main);cursor:pointer;
  font-size:10.5px;font-weight:600;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:4px;
  transition:all .15s;user-select:none;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;position:relative;
}
.tb-btn:hover{background:rgba(var(--neon-rgb),.18);border-color:var(--neon-border)}
.tb-btn:active{transform:scale(.96)}
.tb-btn.active-edit{background:var(--neon);border-color:var(--neon);color:#fff;box-shadow:0 0 12px var(--neon-glow)}
.tb-btn:disabled{opacity:.28;cursor:not-allowed}
.tb-btn:disabled:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.tb-btn.tb-icon{padding:0;width:28px}
.tb-btn.tb-primary{padding:0 12px}
.tb-btn.danger{color:#fca5a5;border-color:rgba(225,29,72,.4)}
.tb-btn.danger:hover{background:rgba(225,29,72,.25);border-color:#f87171;color:#fff}
.tb-btn svg{pointer-events:none;flex-shrink:0}
.tb-btn.zoom-display{min-width:52px;padding:0 8px;font-family:var(--font-mono);font-size:11px;color:var(--text-main);font-weight:600}
.tb-btn#zoomOut,.tb-btn#zoomIn{font-size:15px;font-weight:700;line-height:1;padding:0}

/* ============================================================
   HELP BUTTON — иконка клавиатуры на десктопе, телефон на таче
   ============================================================ */
#btnHelp .help-icon-kb{ display:block; }
#btnHelp .help-icon-tap{ display:none; }

@media (pointer: coarse), (hover: none){
  #btnHelp .help-icon-kb{ display:none; }
  #btnHelp .help-icon-tap{ display:block; }
}

/* ============================================================
   SNAP — кнопка-переключатель с кареткой для поповера
   ============================================================ */
.snap-btn-wrap{
  display:inline-flex;align-items:stretch;position:relative;
  height:28px;
}
.snap-btn-wrap #btnSnap{
  border-top-right-radius:0;border-bottom-right-radius:0;
  border-right:none;
  padding-right:6px;
  min-width:0;
}
.snap-btn-wrap .snap-caret{
  width:14px;
  padding:0;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-left:1px solid rgba(255,255,255,.06);
  border-top-right-radius:var(--radius-lg);
  border-bottom-right-radius:var(--radius-lg);
  color:var(--text-muted);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s,border-color .15s;
  -webkit-tap-highlight-color:transparent;
  position:relative;
}
.snap-btn-wrap .snap-caret::before{
  content:'';
  width:0;height:0;
  border-left:3px solid transparent;
  border-right:3px solid transparent;
  border-top:4px solid currentColor;
  pointer-events:none;
}
.snap-btn-wrap .snap-caret:hover{
  background:rgba(var(--neon-rgb),.18);
  border-color:var(--neon-border);
  color:var(--text-main);
}
.snap-btn-wrap.snap-active #btnSnap{
  background:var(--neon);
  border-color:var(--neon);
  color:#fff;
  box-shadow:0 0 12px var(--neon-glow);
}
.snap-btn-wrap.snap-active .snap-caret{
  background:rgba(var(--neon-rgb),.35);
  border-color:var(--neon);
  color:#fff;
}
.snap-btn-wrap.snap-active .snap-caret:hover{
  background:rgba(var(--neon-rgb),.55);
}

/* TOOL MENUS */
.tool-menus{
  display:flex;gap:6px;padding:6px 8px;
  background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 8px 24px rgba(0,0,0,.25);
  flex-wrap:wrap;flex-shrink:0;
}
.tool-menu-btn{
  height:32px;padding:0 12px;border-radius:8px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  color:var(--text-main);cursor:pointer;
  font-family:inherit;font-size:11.5px;font-weight:600;
  display:flex;align-items:center;gap:6px;transition:all .15s;
}
.tool-menu-btn:hover{background:rgba(var(--neon-rgb),.15);border-color:var(--neon-border)}
.tool-menu-btn.open{background:rgba(var(--neon-rgb),.25);border-color:var(--neon);box-shadow:0 0 12px var(--neon-glow)}
.tool-menu-btn svg{flex-shrink:0}
.tool-menu-btn .tm-caret{opacity:.6;transition:transform .2s}
.tool-menu-btn.open .tm-caret{transform:rotate(180deg);opacity:1}

/* ============================================================
   CANVAS EXTRAS
   ============================================================ */
.canvas-extras{
  position:absolute;
  top:8px;
  left:8px;
  z-index:5;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  pointer-events:none;
  max-width:calc(100% - 16px);
}
.canvas-extras .transform-bar{pointer-events:auto}
.canvas-extras:not(:has(.transform-bar.visible)){display:none}

.transform-bar{
  display:flex;align-items:center;gap:6px;padding:4px 8px;
  background:rgba(13,15,23,.9);
  border:1px solid var(--panel-border);border-radius:var(--radius-sm);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .2s;flex-shrink:0;
}
.transform-bar.visible{opacity:1;pointer-events:auto}
.tf-field{display:flex;align-items:center;gap:4px}
.tf-field label{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--text-muted);text-transform:uppercase;padding:0 2px;user-select:none}
.tf-field input{
  width:52px;padding:4px 6px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:4px;
  color:#fff;font-family:var(--font-mono);font-size:11px;outline:none;
  transition:border-color .15s;text-align:center;
}
.tf-field input:focus{border-color:var(--neon-border);background:rgba(255,255,255,.06)}
.tf-field input:disabled{opacity:.4;cursor:not-allowed}
.tf-sep{width:1px;height:16px;background:rgba(255,255,255,.06);margin:0 2px}